首页 > 其他 > 详细

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

时间:2020-08-13 00:10:19      阅读:134      评论:0      收藏: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>


作者:w晚风
链接:https://www.jianshu.com/p/302a712f3ea8
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

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

原文:https://www.cnblogs.com/dream111/p/13493500.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!