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路由器构造函数选项中设置活动类而不是linkActiveClass.