using a route object to update the path in Nuxt

Question

using a route object to update the path in Nuxt

I need to navigate to a specific URL:

myApp.com/search-page?name%5Bquery%5D=value

The code snippet below works perfectly when I'm on the homepage myApp.com:

this.$router.push({
  path: "search-page",
  query: { name: { query: `${this.value}` } }
});

However, if I'm on a different page with a path like this:

myApp.com/movies/id

using the same code with $router.push redirects me to this unintended URL:

myApp.com/movies/search-page?name%5Bquery%5D=value

The issue is that there is an additional movies/ segment in the URL. How can I ensure that regardless of my current path (URL), the $router.push method always directs me to:

myApp.com/search-page?name%5Bquery%5D=value

javascript vue.js url nuxt.js router

Answer 1

Answer №1

When using path with $router.push, remember to adjust the path value if you are on a nested page.

Instead, consider using name to avoid specifying path levels.

this.$router.push({
  name: "search-page",
  query: { name: { query: `${this.value}` } }
});

In Nuxt, the route names correspond to the folder structure in lower case with hyphens. For example, to access the movies id route in a folder like this:

pages/
--| movies
-----| _id.vue

You can navigate to it by:

this.$router.push({
      name: "movies-id",
      params: { 
         id: 1
      }    
});

Answer 2

When using path with $router.push, remember to adjust the path value if you are on a nested page.

Instead, consider using name to avoid specifying path levels.

this.$router.push({
  name: "search-page",
  query: { name: { query: `${this.value}` } }
});

In Nuxt, the route names correspond to the folder structure in lower case with hyphens. For example, to access the movies id route in a folder like this:

pages/
--| movies
-----| _id.vue

You can navigate to it by:

this.$router.push({
      name: "movies-id",
      params: { 
         id: 1
      }    
});

using a route object to update the path in Nuxt

Answer №1

Similar questions

The functionality of window.location.href seems to be malfunctioning on mobile devices within an ionic application

The fitBounds and panToBounds functions in react-google-maps fail to properly adjust the map's size

javascript - Retrieving a JSON string

Prevent Buttons from Being Clicked While Another is Active in Angular

What's causing this MUI React data grid component to be rendered multiple times?

Struggling with validating props in React with JavaScript

Is it possible to verify the data within a VueJS model? It seems that none of the Vue validators are effective

Creating a v-model with an array of objects in VueJS: A step-by-step guide

Using arrays to pass parameters in JavaScript

Traverse through the loop with React Material UI in JavaScript

To calculate the sum of input field rows that are filled in upon button click using predetermined values (HTML, CSS, JavaScript)

Why is my snapshot returning null, even though there are values in the Firebase Database?

Mastering the art of utilizing particles.js

Mocking a React component with Jest's MockImplementation

Despite changes in the state they are set to, the InitialValues remain constant

What can be done to prevent an ajax call on keyup when there are no search results?

Set up linter rules that utilize `useEffect` in place of `React.useEffect` (utilizing named export rather than full export)

Acquire the id_token from Google using oauth2

Guide to setting the order of rendering in React applications

Countdown alert using JavaScript