vue.js - Vue.js组件使指向根路径的链接始终处于活动状态

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 Router 部分地将根/路径与当前路径匹配。

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

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

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

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