CODEWITHSUNDEEP
vue.jsnuxt.jsvue-router
redshift
redshift

Reputation: 5227

Vue/Nuxt Routing issue: Why does "wrong" component load during a specific route?

Can someone tell me why the following component is loaded when I refresh the browser?

Sandbox link: https://codesandbox.io/s/lucid-darkness-vwklt?file=/pages/index.vue

Let me explain.

What I want to happen and my expected output:

1.) Click "doss" --> Profile and Settings --> [The Profile Page with data is shown]

2.) Then, REFRESH/RELOAD the browser, the profile page is STILL shown with the same data

3.) The URL did not change.

What actually happens and the unexpected output:

1a.) Click "doss" --> Profile and Settings --> [The Profile Page with data is shown]

2a.) Then, REFRESH/RELOAD the browser, the profile page is NOT shown but instead another component is loaded with the title "The Post Detail Page" .

3a.) The URL did not change.

Why does #2a happen? The URL has not changed but the component did.

What am I doing wrong? Here is my NuxtJS folder structure:

enter image description here

Upvotes: 1

Views: 673

Answers (1)

nonNumericalFloat
nonNumericalFloat

Reputation: 1807

To add a dynamic route in Nuxt, create a file starting with a dash. You already did that, which is totally fine, like;

_myPage.vue or add a folder named _myPage containg a index.vue file inside.

But your example won't work because nuxt is missing the "doss" route from your link / menu item. Working example; https://codesandbox.io/s/holy-voice-6pofd?file=/pages/doss/_displayName/index.vue

index.vue inside a _displayName folder

URL path will result in /doss/xxx

Also see; Nuxt dynamic pages

Upvotes: 1

Related Questions