在嵌套路线上活跃 class

Question

我遇到了这个问题：

有这些路线：

user => /user user.edit => /user/edit/:id(\d+)? user.view => /user/:id(\d+)?

user.role => /user/role user.role.edit => /user/role/edit/:id(\d+)? user.role.view => /user/role/:id(\d+)?

我想创建一个侧边栏嵌套菜单。

<NavbarDropdown :title="'Users'" :name="'user'">
    <template #dropdown>
        <router-link
                v-slot="{ href, route, navigate, isActive }"
                :to="{name: 'user'}">
            <a :class="{'bg-gray-200 text-gray-900': isActive}"
               :href="href"
               @click="navigate">
                Users
            </a>
        </router-link>
        <router-link
                v-slot="{ href, route, navigate, isActive }"
                :to="{name: 'user.role'}">
            <a :class="{'bg-gray-200 text-gray-900': isActive}"
               :href="href"
               @click="navigate">
                Roles
            </a>
        </router-link>
    </template>
</NavbarDropdown>

这是下拉组件：

<template>
    <div>
        <router-link
                v-slot="{ href, isActive }"
                :to="{name: name}">
            <div>
                <a :class="{'bg-gray-200 text-gray-900': isActive}"
                    :href="href"
                    @click.prevent="open = !open">
                    {{ title }}
                </a>
                <!-- Expandable link section, show/hide based on state. -->
                <div v-if="open || isActive" class="mt-1 space-y-1">
                    <slot name="dropdown"></slot>
                </div>
            </div>
        </router-link>
    </div>
</template>
<script>
    export default {
        name: 'NavbarDropdown',
        props: {
            title: {
                type: String,
            },
            name: {
                type: String,
                default: ''
            },
        },
        data: () => ({
            open: false,
        }),
        watch: {
            '$route' () {
                this.open = this.$route.matched.some (({name}) => name === this.name);
            }
        },
    };
</script>

现在我的问题是：

项目

        <router-link
                v-slot="{ href, route, navigate, isActive }"
                :to="{name: 'user'}">
            <a :class="{'bg-gray-200 text-gray-900': isActive}"
               :href="href"
               @click="navigate">
                Users
            </a>
        </router-link>

处于活动状态，即使“角色”路线处于活动状态。如果我想使用 isExactActive，.edit/.view-路由不会触发“活动”状态。

这里有什么建议吗？

目前我创建了一个检查活动状态的方法：

isExtendedActive(route){
    return this.$route.matched.some (({name}) => name === `${route}` || name === `${route}.view` || name === `${route}.edit`)
}

Answer 1

我发现利用路由元标记有助于制作导航模块并根据它们所属的项目使事物突出显示。我尝试过的所有其他融入路线的东西似乎都很老套。

类似于：

{
  path: /user/edit/:id?,
  name: userEdit,
  componet: //componet import here,
  meta: {
   module: 'user'
  }
},
{
  path: /user/role/:id?,
  name: userEdit,
  componet: //componet import here,
  meta: {
   module: 'user',
   subModule: 'userRole'
  }
}

然后您可以使用 $route.meta.module 等访问模板中的元数据，使用这些值来决定要应用的样式。

在嵌套路线上活跃 class

Active class on nested routes

vue.js

vue-router

vuejs2