vue.js - vuejs 组件保持到根路径的链接始终处于事件状态

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 router constructor option 中设置您的事件类(class)而不是 linkActiveClass。