Vue Router中 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"></a>

而当使用

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

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

<a href="#/article"></a>
发布了28 篇原创文章 · 获赞 16 · 访问量 6万+

猜你喜欢

转载自blog.csdn.net/sunboylife/article/details/104017962