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
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! ❤️1 Reply
As said, this makes sense since the
route.name for something.vue and something/index.vue are the same
Hmm. Arrived at a somewhat working solution by:
- naming the nested route to something else than index.vue
- adding a redirect to something.vue definePageMeta
I'll live with this