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> 

我希望鏈接第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。