嵌套路由上的活动类答案

【问题标题】：Active class on nested routes嵌套路由上的活动类
【发布时间】：2020-10-08 14:15:13
【问题描述】：

我遇到了这个问题：

有这些路线：

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-routes 不会触发“活动”状态。

这里有什么建议吗？

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

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

【问题讨论】：

标签： vue.js vuejs2 vue-router

【解决方案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 等访问模板中的元数据，使用这些值来决定应用哪些样式。

【讨论】：