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


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
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM