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 saving function of the Jquery camera is not working properly and does not store the

Having trouble with less.modifyVars not functioning properly in Visual Studio?

Struggling to make even the most basic example work with TypeScript and npm modules

Tips for transferring information from a parent to a child controller in Angular using the $broadcast method?

Instructions for appending an id to the URL of events in fullcalendar using Rails

Finding common elements between two arrays through partial matching

Customize the styling of an individual 'LI' item within an array by utilizing Jquery

Is the RouterModule exclusively necessary for route declarations?

What is the best way to navigate to a new webpage after clicking a button?

Obtain a URL using JavaScript's regular expressions

Grouping items by a key in Vue and creating a chart to visualize similarities among those keys

Guide to streaming audio files using vue.js

What is the technique to enable this div to be clickable?

Why is 'this.contains' not recognized as a function when I invoke it within another function?

CSS or jQuery: Which is Better for Hiding/Showing a Div Within Another Div?

Is it possible to utilize $.each() in combination with $.ajax() to query an API?

Infinite Vue.js Scrolling: Elevate Your Web

What are the options for app directory routing and programmatic navigation in the upcoming 13 application

Is there a way to eliminate a trailing slash from a URL?

Transferring data files through an ajax-based form submission