Vue --- active-class修改路由router-link的类名样式

1、正常写router-link标签的时候,如果该标签设置了默认路由或者点击了某个路由,就会自动添加一些样式,如下图
Vue --- active-class修改路由router-link的类名样式_第1张图片
Vue --- active-class修改路由router-link的类名样式_第2张图片
可以通过这个样式,来改变路由标签的样式
Vue --- active-class修改路由router-link的类名样式_第3张图片
Vue --- active-class修改路由router-link的类名样式_第4张图片

2、如果不想用默认的router-link-active类名,可以在router-link中写上active-class="自定义的类名",即可
Vue --- active-class修改路由router-link的类名样式_第5张图片
Vue --- active-class修改路由router-link的类名样式_第6张图片
但是这么写,如果路由增多了,会导致在router-link标签中的active-class也会增多,冗余代码就会出现,所以有个简便写法,在你路由配置的文件中,找到如下图的代码块,加上linkActiveClass:"自定义的类名",即可
Vue --- active-class修改路由router-link的类名样式_第7张图片
同时,页面中的router-link标签中的active-class就不需要了,恢复到最初的样子即可
Vue --- active-class修改路由router-link的类名样式_第8张图片

你可能感兴趣的:(Vue)