英文:
Nuxt3 Child routes and active class in navigation
问题
I have a navigation - One of the link is linking to "/users" (Nuxt3 project)
当我在"/users"路线上时，我有一个子导航链接到"/users/groups"
但是当我登陆到"/users/groups"路线时，即使"/users/groups"是子路线，主导航上也没有活动类？
我的结构如下:
/users/index.vue和/users/groups/index.vue布局都使用了<NuxtPage :page-key="$route.path" />
我需要以不同的方式构建它，以使我的主导航看到"/users/groups"是"/users"的子路线，然后添加活动类吗？
英文:
I have a navigation - One of the link is linking to "/users" (Nuxt3 project)
When I'm on the "/users" route, I have a subnavigation linking to "/users/groups"
But when I land on the route "/users/groups" - I don't get the active class in the main navigation on the "/users", even though "/users/groups" is a child route?
My structure looks like this:
The layout both /users/index.vue and /users/groups/index.vue uses outputs <NuxtPage :page-key="$route.path" />
Do I need to structure it differently to get my main navigation to see that "/users/groups" are a child of "/users" and then add the active class?
答案1
得分: 2
Your structure is correct. You just need to create a users.vue file inside the pages with the NuxtPage content.
~/pages/users.vue
<template>
<div>
<NuxtPage />
</div>
</template>
I created an example for you and it is working. See screenshot:
Hope that helps you.
英文:
Your structure is correct. You just need to create a users.vue file inside the pages with the NuxtPage content.
~/pages/users.vue
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
<template>
<div>
<NuxtPage />
</div>
</template>
<!-- end snippet -->
I created an example for you and it is working. See screenshot
https://stackblitz.com/edit/nuxt-starter-w48c5q?file=pages/users/index.vue
Hope that helps you
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论