我有一个带有一些链接的主导航导航栏 . 在主页中,即在根路径('/')中,我有嵌套(子)路由 .
路线配置:
const routes = [
{path: '/', component: HomeMainContent, children: [
{path: '', component: MovieList},
{path: 'in-theaters', component: MovieList},
{path: 'coming-soon', component: ComingSoonList},
{path: 'trailers', component: TrailerList},
]},
{path: '/about', component: About},
{path: '/contact',component: Contact},
];
因此,当根路径 ('/')
处于活动状态时,其子路由器根路径 ('')
将被激活 .
子组件路由器的模板是这样的:
<template>
<div id="homeSubMenuWrapper">
<ul id="subMenuList">
<li v-for="menu in menuList">
<router-link class="menuItem" :to="menu.path">{{menu.name}}</router-link>
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
menuList: [
{name: 'IN THEATER', path: '/in-theaters'},
{name: 'COMING SOON', path: '/coming-soon'},
{name: 'TRAILERS', path: '/trailers'},
]
}
}
}
</script>
因为,路径 ('')
和( 'in-theaters')
具有相同的组件,我想使路径 ('in-theaters')
的路由器链接在其父路径 ('/')
的子路径 ('')
处于活动状态时具有 router-link-active
的类 . 我该怎么做?
这意味着只要子路径路径为空路径 ('')
,第一个子路径 ('in-theaters')
就应该具有活动类 .
1 回答
根据@ Potray的建议,我最终检查了$ route.path和模板中的子路径 .