VUE 导航激活状态

激活状态(选中样式)
默认情况下,vue-router会用 当前路径 匹配 导航路径 :
(当前路径:在这里插入图片描述
在这里插入图片描述


(导航路径:
在这里插入图片描述


如果当前路径是以导航路径开头,则算作匹配,会为导航的a元素添加类名router-link-active
如果当前路径完全等于导航路径,则算作精确匹配,会为导航的a元素添加类名router-link-exact-active
在这里插入图片描述
在这里插入图片描述
明白原理后,对选中样式问题进行处理
样式问题
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
可以为组件RouterLink添加bool属性exact,将匹配规则改为:必须要精确匹配才能添加匹配类名router-link-active
写法
:exact="true"或exact
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
另外,可以通过active-class属性更改匹配的类名,通过exact-active-class更改精确匹配的类名
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/weixin_48727085/article/details/118326128