agunmu Posts - Answer Overflow

agunmu

•Created by agunmu on 5/7/2024 in #❓・help

Nuxt renders empty page on client-side navigation

Hi guys! I have a pretty specific vue-router related issue. I'd like to pull off a tabbed interface where I have two tabs on top, and a nuxt-page below, with the tabs controlling which page to render. I'd like the URL structure for these pages to be something/ and something/groups/. The idea is that I'd like the main navigation to have a NuxtLink that takes the user to the 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/ route, the 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 first and stops there, but that doesn't explain why the server-side rendered page on hard refresh works correctly. Help much appreciated! ❤️

3 replies

Gaming

Programming