CODEWITHSUNDEEP
vue.jsnuxt.jsvue-router
Alex
Alex

Reputation: 349

How to use named routes

Problem

In Nuxt2, how do I programmatically navigate as a user in Nuxt when routes are nested? I know that I can use this.$router.push({ name: "exchanges" }) to push a user to the exchanges pages, but when routes are nested, I am not sure what to do. If I use this.$router.push({ path: "exchanges/create" }) or this.$router.push("exchanges/create"), "exchanges/create" gets added to the URL even if I am already at that current URL.

Also, the page component names are "ExchangesPage", "EachExchangePage", "CreateExchangePage", and "HomePage". This didn't work when I tried to use it as the name for the named routes.

Current File Structure in ./pages

pages/
--| exchanges/
-----| _userId/
--------| index.vue
-----| create/
--------| index.vue
--| index.vue

Upvotes: 17

Views: 16835

Answers (3)

kissu
kissu

Reputation: 46676

On top of the tips given above, you can also see this in the Vue devtools, in the Routing > Routes tab. Everything should be accessible there!

enter image description here

Upvotes: 4

tony19
tony19

Reputation: 138276

Based on the docs, the names of the nested routes would be:

pages/
--| exchanges/
-----| _userId/
--------| index.vue             // name: 'exchanges-userId'
-----| create/
--------| index.vue             // name: 'exchanges-create'
--| index.vue

Example script usage:

this.$router.push({ name: 'exchanges-userId', params: { userId: 11 } })
this.$router.push({ name: 'exchanges-create' })

Example template usage:

<nuxt-link :to="{ name: 'exchanges-userId', params: { userId: 11 } }">User 11</nuxt-link>
<nuxt-link :to="{ name: 'exchanges-create' }">Create</nuxt-link>

Upvotes: 10

hamid niakan
hamid niakan

Reputation: 2861

for a quick check about your routes in a nuxt project you can do this:

in your project's directory navigate to this:

.nuxt/router.js

this is the file with all your routes generated by nuxt and you can check their exact name to navigate to them, look at this picture:

enter image description here

according to the image above which is from one of my projects I can do this:

this.$router.push({ name: 'universities-id' });

Upvotes: 29

Related Questions