vuejs <router-link> 组件使指向根路径的链接始终处于活动状态

Question

>我的导航是这样的

<nav>
<ul class="nav nav-list">
<router-link tag="li" to="/"><a href="#">Home</a></router-link>
<router-link tag="li" to="/page1"><a href="#">Page1</a></router-link>
<router-link tag="li" to="/page2"><a href="#">Page2</a></router-link>
</ul>
</nav>

我希望指向第 1 页的链接在第1 页中处于活动状态，第 2 页也是如此。它工作正常，当我导航到页面时链接已被激活，但问题是即使我离开页面，链接到根(/(页面也始终处于活动状态。

Answer 1

根链路始终处于活动状态，因为 Vue 路由器将根/路径与当前路径部分匹配。

要执行完全匹配，您可以：

1. 将exact属性添加到router-link：

   <router-link tag="li" to="/" exact>
   <a href="#">
   Home
   </a>
   </router-link>
   

2. 在linkExactActiveClass路由器构造函数选项中设置活动类，而不是linkActiveClass。