vuejs 组件保持链接到根路径总是主动

Question

我有我的导航这样的vuejs <router-link>组件保持链接到根路径总是主动

<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页和同为第二页的时候。它工作正常，当我导航到页面时链接被激活，但问题是链接到根（/）页面始终处于活动状态，即使我离开页面时也是如此。

Answer 1

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

要执行精确匹配，您可以：

1. 添加exact属性为router-link：

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

2. 设置你的主动类在linkExactActiveClass router constructor option而不是linkActiveClass。