如何使用Vue設置活動菜單選項

Question

我有兩列布局。左欄有一個堆疊菜單，當用戶選擇一個選項時，內容顯示在右邊。在選定的菜單鏈接上設置active類的最佳方法是什麼？

我在下面提出了一個解決方案，但它似乎有點冗長。每個菜單項都有一個類別分配，取決於data.activeTab。點擊事件處理程序更新data.activeTab的值。

<template> 
    <div> 
     <div class="row"> 
      <div class="col-md-3"> 
       <ul class="nav nav-pills nav-stacked"> 
        <li role="presentation" :class="{active : activeTab == 'option1'}"> 
         <a :href="'/#/sales/' + uuid + '/option1'" @click="updateMenu">Option 1</a> 
        </li> 
        <li role="presentation" :class="{active : activeTab == 'option2'}"> 
         <a :href="'/#/sales/' + uuid + '/option2'" @click="updateMenu">Option 2</a> 
        </li> 
       </ul> 
      </div> 
      <div class="col-md-9"> 
       <router-view></router-view> 
      </div> 
     </div> 
    </div> 
</template> 

<script> 
    export default { 
     data : function() { 
      return { 
       activeTab : 'option1' 
      } 
     }, 
     props : [ 
      'uuid' 
     ], 
     methods : { 
      updateMenu : function (event) { 
       var str = event.target.toString(); 
       this.activeTab = str.substr(str.lastIndexOf('/') + 1); 
      } 
     } 
    } 
</script> 

Answer 1

，而不是你手動錨標籤使用router-link並設置在router construction options的linkActiveClass。

我看不到你的路線對象，所以這是一個基於你上面的猜測的最佳猜測。請參閱上面鏈接的路由器鏈接文檔，以確定設置to屬性的最佳方式。

<router-link tag="li" :to="{ path: 'sales', params: { uuid : uuid, option: "option1" }}"> 
    <a>Option 1</a> 
</router-link> 
<router-link tag="li" :to="{ path: 'sales', params: { uuid : uuid, option: "option2" }}> 
    <a>Option 2</a> 
</router-link> 

然後，無論你初始化你的路由器，

new VueRouter({ 
    routes, 
    linkActiveClass: "active" 
});