Vue路由如何设置导航选中（高亮）

本文内容知识点比较简单，主要面向vue新手朋友们解答疑惑。vue前辈请忽略。

 

我自己学习vue的时候也有遇到过这个情况，看到一些新人朋友们在问，vue的路由怎么设置选中(高亮)呀？ 默认class是否可以不显示呀？ 请看下文 ? 

 

一、设置选中(高亮)

知识点：

router-link 作为 vue 中的路由跳转标签，它内置有一个选中的状态，当处于当前路由时，会给 router-link 加上两个类名：router-link-active 和 router-link-exact-active。

router-link-active：设置链接激活时使用的 CSS 类名
router-link-exact-active：配置当链接被精确匹配的时候应该激活的 class

 当你了解到上面知识点之后就容易了，我们可以通过默认类名来设置样式就好了。 例如：

.nav li > a.router-link-active{ font-weight: bold;}
.nav li > a.router-link-active span::before{ content: ''; width: 100%; height: 1px; display: block; }

 

二、去掉默认类名 / 修改默认类名

知识点

router-link-active:全局配置 的默认“激活 class 类名”
linkExactActiveClass：全局配置 精确激活的默认的 class

 想要修改或者去掉默认类名只需在路由文件里面配置即可，例如：

export default new Router({
  linkActiveClass: 'active',
  linkExactActiveClass: 'active',
  routes: [
    .... //这里是路由配置
  ]
});

见上面代码，已经把 linkActiveClass 和 linkExactActiveClass 都改成了"active"， 如果此处设置为空，则页面中就不会显示默认类名

 

以上内容如有错误，请各朋友指正，谢谢。