Vue Router active-class 属性

阅读 50

2022-07-27

​​active-class​​​ 是 vue-router 模块的 ​​router-link​​​ 组件的属性,当 ​​router-link​​ 标签被点击时将会应用这个样式。

有两种使用方式:

  • 直接在路由 Router 构造函数中配置​​linkActiveClass​​ 属性

export default new Router({
linkActiveClass: 'active',
})

使用这种方式,会在每个 ​​router-link​​​ 标签上引用这个样式(当被点击后),如果您只想在某部分 ​​router-link​​ 上使用,则可以选择第二种。

  • 单独在​​router-link​​​ 标签上使用​​active-class​​ 属性

<router-link to="/about" active-class="active">about</router-link>

最后,为您选中的链接设置样式:

a.router-link-exact-active {
color: plum;
}

.active {
font-size: 16px;
font-weight: bold;
}

精彩评论(0)

0 0 举报