How to use named routes in Nuxt js?

Question

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

Answer 1

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:

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

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