前端大杂烩

Vue Router active-class 属性

2022-05-22  本文已影响0人  lio_zero

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

有两种使用方式:

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

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

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

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

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

.active {
  font-size: 16px;
  font-weight: bold;
}
上一篇 下一篇

猜你喜欢

热点阅读