How to use named routes in Nuxt js?

user_13287073 0
Viewed 10242

Problem

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
vue-router nuxt.js vue.js
3 Answers

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' });
user_120789420

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>
user_62771510

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

user_88165850
Related