美文网首页
active-class 是哪个组件的属性?

active-class 是哪个组件的属性?

作者: w晚风 | 来源:发表于2020-06-10 11:43 被阅读0次

    active-class属于Vue哪一个modules,有什么作用

    active-class 属于vue-router的样式方法
        当routerlink标签被点击时将会应用这个样式
     
    使用有两种方法
    routerLink标签内使用
    
    <router-link to='/' active-class="active" >首页</router-link>
    

    在路由js文件,配置active-class

    <script>
        const router = new VueRouter({
            routes,
            linkActiveClass: 'active'
        });
    </script>
    <script>
        const router = new VueRouter({
            routes,
            linkActiveClass: 'active'
        });
    </script>
    

    在使用时会有一个Bug

    首页的active会一直被应用
    解决办法
    为了解决上面的问题,还需加入一个属性exact,类似也有两种方式:
    在router-link中写入exact

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

    在路由js文件,配置active-class

    <script>
        const router = new VueRouter({
            routes,
            linkExactActiveClass: 'active'
        });
    </script>
    

    相关文章

      网友评论

          本文标题:active-class 是哪个组件的属性?

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