Issues with Nuxtjs routing on Netlify

I currently have a NuxtJs (Vue) application deployed on Netlify. The issue I am facing is that when I redirect to other pages, the URL ends up concatenating the last page and the next page.

For example, if the current page URL is https://page-example/register and I redirect to the next page using this code:

this.$router.push("confirmationsend");

On local, the URL I get is:

https://localhost:3001/confirmationsend

However, on Netlify, the URL turns out to be:

https://page-example/register/confirmationsend

Unfortunately, NuxtJs is unable to resolve this routing issue.

javascriptvue.jsvuejs2nuxt.jsnetlify

Answer №1

If you're navigating with Vue Router, you have a couple of options. One way is to push a path like this:

this.$router.push('/confirmationsend')
// or this.$router.push({ path: '/confirmationsend' })

Alternatively, you can use the name property (which you can locate in your router file or Vue devtools):

$router.push({ name: 'confirmationsend' })

Refer to the Vue router documentation for more information. It's generally not recommended to mix both name and path, as a push without a / typically means "append it to my current route" in a History push context.

For clarity, it's best to use one of the above snippets to communicate clearly with Vue Router or other hosting platforms.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Looking to compare values within an ng-repeat loop?

I am trying to compare values within the context of an ng-repeat directive. Specifically, I need to compare the current value with the previous value in the array being iterated over by ng-repeat. For example, if my array contains the values [2,3], how can ...

javascriptangularjs

Looking to deactivate a particular checkbox in a chosen mode while expanding the tree branches

I encountered an issue with a checkbox tree view where I needed to disable the first two checkboxes in selected mode. While I was able to achieve this using the checked and readonly properties, I found that I could still uncheck the checkboxes, which is no ...

javascripthtmlcss

"Protractor encountered an issue when navigating to the most up-to-date Angular section in our

We are in the process of upgrading our application from AngularJS to the latest version of Angular. I am currently working on writing tests that transition from the AngularJS version of the app to the admin application, which is built using the latest ver ...

javascriptangularjsangulartypescriptprotractor

Encountering limitations in accessing certain object properties with the openweathermap API

As I integrate axios into my react application to retrieve weather data from the openweathermap api, I'm encountering some issues with accessing specific properties from the JSON object returned by the API call. For instance, I can easily access data. ...

javascriptjsonreactjsobjectopenweathermap

Guide on creating multiple instances of vue-multiselect with a simple button click

I am trying to implement a vue-multiselect dropdown with the addition of a new dropdown upon clicking an "add more" button. However, I am currently unsure of the best approach to achieve this. Problem/Question: When adding 2 dropdowns, if the same option ...

javascriptvue.jsvuejs3vue-multiselect

I'm curious to know why my jQuery function fadeOut is functioning properly while slice isn't working as expected

I'm trying to create a button that displays three consecutive posts After clicking on "view all", the three "div" elements should become visible I'm attempting to use jQuery to make the three 'div' elements appear when the view all bu ...

javascriptjqueryhtml

The sonar scanner encountered an error while attempting to parse a file using the espree parser in module mode

While executing sonar-scanner on a node project, I encounter a Failed to parse file issue, as shown below: ERROR: Failed to parse file [file:///home/node-app/somedir/index.js] at line 1: Unexpected token './AddCat' (with espree parser in mod ...

javascriptnode.jssonarqubesonarscanner

Issue with Google Finance JSON response not functioning as expected in Chrome and Firefox browsers, yet appears to be working properly in

I am currently working on a JavaScript project that involves fetching STOCK data from the Google Finance API. When I manually paste the link into my browser, I can successfully retrieve the JSON response: // [ { "id": "22144" ,"t" : "AAPL" ,"e" : "NASDAQ ...

javascriptjsonxmlhttprequestgoogle-finance

When a new element is introduced, onmouseenter feature assigns a unique dynamic function variable

I am incorporating elements generated by Javascript using a for loop. My goal is to pass different variables to a function for each element. Check out my code snippet: var thumbnail_box = document.createElement("div"); thumbnail_box.onmouseenter = functi ...

javascriptjquery

Issue with unit testing a ViewportRuler in Angular 2 Material Library

I am currently working on an Angular2 component that includes a tab control from @angular/material. During testing of my component (refer to the simplified code below), I encountered the following error: Error: Error in ./MdTabHeader class MdTabHeader - ...

javascriptangulartypescriptkarma-jasmine

Guide to building a seamless page without refreshes with the help of jquery, express, and handlebars

I need assistance with my express JS project. I am trying to set up two pages using NodeJS, incorporating handlebars as the template engine. My objective is to have the first page rendered using res.render('home'), and for the second page to be l ...

javascriptjquerynode.jsexpresshandlebars.js

Ways to access a JavaScript object beyond the function scope

Using the code below, I am able to retrieve JSON data when an element is clicked. This data is then used to create a table, fill the cells with images, and append the table to a specific div. function LoadImagesByCategory() { $.getJSON("/Service/GetJs ...

javascriptjquery

Functions perfectly on Chrome, however, encountering issues on Internet Explorer

Why does the Navigation Bar work in Chrome but not in Internet Explorer? Any insights on this issue? The code functions properly in both Internet Explorer and Chrome when tested locally, but fails to load when inserted into my online website editor. Here ...

javascriptjqueryhtmlcssgoogle-chrome

Using JavaScript to Transfer Data Between Web Pages

For our landing page, we're planning to incorporate two levels of questions for the respondents. Initially, the respondents will be asked to choose up to four interest tracks using checkboxes. Once they have made their selections, they can proceed to ...

javascriptjquery

Managing file responses in Node.js

Hey there! I've been working on implementing ajax image upload and here's how far I've gotten. This is my index.html: <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8> <title>File Upload ...

javascriptnode.jsexpress

Adjusting the gap between TableRows in Material-UI

Is there a way to increase the spacing between TableRow MaterialUI components in my code? <S.MainTable> <TableBody> {rows.map(row => { return ( <S.StyledTableRow key={row.id}> <TableCell component="th" s ...

javascriptcssreactjsmaterial-uijsx

including a content tag into an input field within a template

I'm experimenting with the new html5 template tag to create a versatile form that can be used in various situations without relying heavily on javascript. Check out this fiddle to see what I have so far http://jsfiddle.net/684uH/ My objective is to ...

javascripthtmlweb-componenthtml5-template

Combine multiple key values from an array of objects into a single array

I have a set of key and value pairs that I need to filter based on whether the values are in an array or not, and then combine them into a single array. const holiday_expenses = { food: [{name: "abc", place: "xyz"}], travel: [{name: ...

javascriptreactjsangularjskey-value

Adaptive Container with Images that are not stretched to full width

Is there a way to achieve the same effect as seen in images 2 and 3 here: Although these images already have their own "padding," I'm curious if it can be replicated using just jQuery and CSS? I would appreciate any help or insights on this. Thank y ...

javascriptjquerycssresponsive-design

What is the best way to conceal two Bootstrap divs that should not both be visible at the same time?

I am working with two different types of charts: an Emotion chart and a Polarity chart. To control the visibility of these charts, I have implemented two buttons, one for each chart. The functionality is such that when the first button is clicked, only the ...

javascriptbootstrap-5