美文网首页前端大杂烩
Vue Router active-class 属性

Vue Router active-class 属性

作者: lio_zero | 来源:发表于2022-05-22 15:31 被阅读0次

    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;
    }
    

    相关文章

      网友评论

        本文标题:Vue Router active-class 属性

        本文链接:https://www.haomeiwen.com/subject/nkvkprtx.html