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>
复制代码
在使用时会有一个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>
复制代码
所有评论(0)