# active-class 是哪个组件的属性?
active-class属于Vue哪一个modules,有什么作用
active-class 属于vue-router的样式方法 当routerlink标签被点击时将会应用这个样式 使用有两种方法 routerLink标签内使用
<router-link to='/' active-class="active" >首页</router-link>
1
# 在路由js文件,配置active-class
<script>
const router = new VueRouter({
routes,
linkActiveClass: 'active'
});
</script>
1
2
3
4
5
6
2
3
4
5
6
<script>
const router = new VueRouter({
routes,
linkActiveClass: 'active'
});
</script>
1
2
3
4
5
6
2
3
4
5
6
# 在使用时会有一个Bug
首页的active会一直被应用 解决办法 为了解决上面的问题,还需加入一个属性exact,类似也有两种方式: 在router-link中写入exact
<router-link to='/' active-class="active" exact>首页</router-link>
1
在路由js文件,配置active-class
<script>
const router = new VueRouter({
routes,
linkExactActiveClass: 'active'
});
</script>
1
2
3
4
5
6
2
3
4
5
6
http://upload-images.jianshu.io/upload_images/11226018-ff6bdec55ac7a4a4.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1080/q/50
留言须知
对此博客有任何疑问欢迎留言
留言建议留下你的qq号/昵称(输入qq号自动拉取昵称),方便及时收到博主回复
本站支持丰富的表情,满足你的个性需求
请不要评论违反中国法律的内容。