"router-link-active" not added when on sub route
My pages structure looks like this:
index.vue
admin.vue (NuxtPage)
admin
- index.vue
- posts.vue (NuxtPage)
- posts
- index.vue
- categories.vue (NuxtPage)
- categories
- index.vue
I have a list of links for the admin pages (when on admin), one of them leading to /admin/posts. When I'm on that route it sets
router-link-activeand router-link-exact-activeproperly, but on /admin/posts/categories the link has neither.
From what I understand the mostly "empty" vue files with <NuxtPage /> should do the trick but it doesn't seem to work or I'm missing something. I'm using @nuxtjs/i18n to localize paths if that could effect somehow, so it's the modified NuxtLinkLocale that's used. So /admin/posts/categories are, since it is in swedish, /admin/inlagg/kategorier.3 Replies
I'm not sure of the correct answer here since the formatting of your message might mislead me (maybe navigate to your
pages directory and show us the output of tree so we can understand how your pages are organised).
But if the formating is correct in your post, then categories.vue and /categories should be on the same level as /posts/index.vue for Vue Router to set the correct classes.I didn't realize it had formatted it a bit strange, here's a screenshot of the
pagesdirectory
The NuxtLinkLocale
to in my admin navigation is set admin-posts which maps to /admin/inlagg (in swedish):