如何在Vue.js中保持导航链接高亮显示

Question

所以，我有一个带有路由器链接的导航栏。我想要的是选择的链接保持突出显示的选择，以便用户知道他们在哪个页面上。目前我有这样的东西。

<div class="mynav">
<router-link to="...">...</router-link>
....
</div>
...
.mynav {
...
}
.mynav a {
...
}
.mynav a:hover {
...
}

我尝试使用.mynav a:active，但那不起作用。

Answer 1

in/router/index.js:

export default new Router({
linkExactActiveClass: 'is-active', // this is important
routes: [
{
path: '/main',
name: 'Main',
component: Main
},

那么router-link应该是这样的:

<router-link class="nav-link pl-0" to="/main">Main</router-link>

，然后在CSS中，例如:

.router-link-active {
border: 1px solid #fff;
color: #fff !important;
}

Answer 2

只需将此样式添加到Vue组件中的样式标签中:

<style lang="css">
.router-link-exact-active {
border-bottom: 1px solid #123456;
}
</style>

Answer 3

你想用更多的参数定义你的标签。详见https://router.vuejs.org/api/#active-class

对于你的例子:<router-link to="..." active-class="active" ></router-link>

或者，你可以改变你配置路由器的位置:

export default new Router({
...,
linkExactActiveClass: 'is-active',
routes: []
})

详情见https://forum.vuejs.org/t/add-and-remove-is-active-class-v-for-router-links/24859