vue路由的active-class和exact-active-class区别

Posted kevoin

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue路由的active-class和exact-active-class区别相关的知识,希望对你有一定的参考价值。

exact-active-class 和 active-class 的区别

router-link 默认情况下的路由是模糊匹配,例如当前路径是 /article/1 那么也会激活 <router-link to="/article">,所以当设置 exact-active-class 以后,这个 router-link 只有在当前路由被全包含匹配时才会被激活 exact-active-class 中的 class,例如:

<router-link to="/article" active-class="router-active"></router-link>

当用户访问 /article/1 时会被激活为:

<a href="#/article" class="router-active" rel="nofollow"></a>

而当使用:

<router-link to="/article" exact-active-class="router-active"></router-link>

当用户访问 /article/1 时,不会激活这个 link 的 class:

<a href="#/article" rel="nofollow"></a>

以上是关于vue路由的active-class和exact-active-class区别的主要内容,如果未能解决你的问题,请参考以下文章

iview二级路由第一次点击的时候不高亮

vue的router-link

vue-router有哪些组件?

vuejs 基础总结(one)

vuejs面试题务必熟知的vuejs面试题「务必收藏」

vue.js面试题总汇