美文网首页
vue active-class的用法

vue active-class的用法

作者: xcx时光你好 | 来源:发表于2020-07-23 16:43 被阅读0次

    1.active-class的作用

    active-class是vue-router模块的router-link组件中的属性,用来做选中样式的切换;

    2.在vue-router中要使用active-class有两种方法:

    a.直接在路由js文件中配置linkActiveClass

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

    b.在router-link中写入active-class

    <router-link to="/home" class="menu-home" active-class="active">首页</router-link>
    

    3.如果使用第二种方法添加active-class,跳转到my页面后,两个router-link始终都会有选中样式,代码如下

    <div class="menu-btn">
      <router-link to="/" class="menu-home" active-class="active">
        首页
      </router-link>
    </div>
    <div class="menu-btn">
      <router-link to="/my" class="menu-my" active-class="active">
        我的
      </router-link>
    </div>
    

    可能是因为 to="/" 引起的,active-class选择样式时根据路由中的路径去匹配,然后显示,例如在my页面中,路由为localhost:8080/#/my,那么to="/”和to="/my"都可以匹配到,所有都会激活选中样式

    4.要解决问题也有两种方式,都是通过加入一个exact属性

    a.直接在路由js文件中配置linkActiveClass

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

    b.在router-link中写入exact

    <router-link to="/" class="menu-home" active-class="active" exact>首页</router-link>
    

    5.也可以如此解决

    <router-link to="/home" class="menu-home" active-class="active" exact>首页</router-link>
    路由中加入重定向
    {
      path: '/',
      redirect: '/home'
    }
    

    相关文章

      网友评论

          本文标题:vue active-class的用法

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