Nuxt•2y ago•

2 replies

Nuxt renders empty page on client-side navigation

Hi guys! I have a pretty specific

vue-router

vue-router

related issue. I'd like to pull off a tabbed interface where I have two tabs on top, and a

nuxt-page

nuxt-page

below, with the tabs controlling which page to render. I'd like the URL structure for these pages to be

something/

something/

and

something/groups/

something/groups/

. The idea is that I'd like the main navigation to have a

NuxtLink

NuxtLink

that takes the user to the

something/

something/

route, and the user can then use the tabs to switch to the groups route if needed.

At first I thought that this can be done with the folder structure

-| something/
---| groups.vue
---| index.vue
-| something.vue

-| something/
---| groups.vue
---| index.vue
-| something.vue

but it only works half-way. If I hard refresh the page when I'm in the

something/

something/

route, the

index.vue

index.vue

content gets rendered normally, but if I navigate away and return, the page is empty. I'm guessing that vue-router matches

something.vue

something.vue

first and stops there, but that doesn't explain why the server-side rendered page on hard refresh works correctly.

Help much appreciated!

Nuxt•2y ago•

2 replies

agunmu

Nuxt renders empty page on client-side navigation

Hi guys! I have a pretty specific

vue-router

vue-router

related issue. I'd like to pull off a tabbed interface where I have two tabs on top, and a

nuxt-page

nuxt-page

below, with the tabs controlling which page to render. I'd like the URL structure for these pages to be

something/

something/

and

something/groups/

something/groups/

. The idea is that I'd like the main navigation to have a

NuxtLink

NuxtLink

that takes the user to the

something/

something/

route, and the user can then use the tabs to switch to the groups route if needed.

At first I thought that this can be done with the folder structure

-| something/
---| groups.vue
---| index.vue
-| something.vue

-| something/
---| groups.vue
---| index.vue
-| something.vue

but it only works half-way. If I hard refresh the page when I'm in the

something/

something/

route, the

index.vue

index.vue

content gets rendered normally, but if I navigate away and return, the page is empty. I'm guessing that vue-router matches

something.vue

something.vue

first and stops there, but that doesn't explain why the server-side rendered page on hard refresh works correctly.

Help much appreciated!

Nuxt renders empty page on client-side navigation

Similar Threads

Nuxt renders empty page on client-side navigation

Similar Threads

Similar Threads

Similar Threads