如何在 Vue.js 中选择时突出显示导航链接答案

【问题标题】：How can I keep a navigation link highlighted on selection in Vue.js如何在 Vue.js 中选择时突出显示导航链接
【发布时间】：2021-05-19 19:11:54
【问题描述】：

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

<div class="mynav">
    <router-link to="...">...</router-link>
    ....
</div>

...

.mynav {
 ...
}

.mynav a {
 ...
}

.mynav a:hover {
 ...
}

我尝试使用.mynav a:active，但没有成功。

【问题讨论】：

标签： html twitter-bootstrap vue.js

【解决方案1】：

在/router/index.js:

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

那么路由器链接应该是这样的：

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

然后以 CSS 为例：

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

【讨论】：

【解决方案2】：

只需将此样式添加到 Vue 组件内的样式标签中即可：

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

【讨论】：

【解决方案3】：

您希望使用更多参数来定义您的标签。详情请见https://router.vuejs.org/api/#active-class。

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

或者，您可以更改配置路由器的位置：

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

【讨论】：