2017-08-10 136 views
0

我有我的導航這樣的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頁和同爲第二頁的時候。它工作正常,當我導航到頁面時鏈接被激活,但問題是鏈接到根(/)頁面始終處於活動狀態,即使我離開頁面時也是如此。

回答

4

根鏈接始終處於活動狀態,因爲Vue路由器與當前路徑的根路徑/部分匹配。

要執行精確匹配,您可以:

  1. 添加exact屬性爲router-link

    <router-link tag="li" to="/" exact> 
        <a href="#"> 
         Home 
        </a> 
    </router-link> 
    
  2. 設置你的主動類在linkExactActiveClass router constructor option而不是linkActiveClass
+0

'確實'做了這個把戲謝謝 –