嵌套路线上的活动类
嵌套路线上的活动类
提问于 2020-10-08 22:15:14
我遇到了这个问题：
拥有以下路由：
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>这是Dropdown-Component：
<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不会触发"active“状态。
这里有什么建议吗？
目前，我创建了一个方法来检查活动状态：
isExtendedActive(route){
return this.$route.matched.some (({name}) => name === `${route}` || name === `${route}.view` || name === `${route}.edit`)
}回答 1
Stack Overflow用户
回答已采纳
发布于 2020-10-09 05:21:03
我发现利用路由meta标签可以帮助创建导航模块，并根据它们属于什么项目来突出显示内容。我尝试过的所有其他东西似乎都是黑话。
类似于：
{
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 ect访问模板中的元数据，使用这些值来决定要应用的样式。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/64264437
复制相关文章
相似问题
腾讯云开发者
