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>

我希望Page1的链接在第1页中处于活动状态，而对于Page2则相同。它工作正常，当我导航到页面时链接被激活但是问题是链接到根（/）页面总是活动，即使我离开页面。

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而非linkActiveClass中设置您的有效课程。