VueJS精確主動類

Question

我有一個使用Router-link的菜單，當激活Router-link時，我想在“ li”上放置“ Active”類。

<ul class="nav nav-second-level">
    <li v-for="item in menu">
        <router-link :to="{ name: somewhere }" tag="a" exact-active-class="IS-ACTIVATED">
            {{Name}}
        </router-link>
    </li>
</ul>

有沒有一種方法可以使用“ exact-active-class”將類設置為父類？

謝謝！

Answer 1

您可以使用v-if檢查您所在的路由，並在$route.name在somewhere添加類

<ul class="nav nav-second-level">
     <li v-for="item in menu" :class="{ 'IS-ACTIVATED': $route.name === somewhere }">
         <router-link :to="{ name: somewhere }">
             {{Name}}
         </router-link>
     </li>
 </ul>

Answer 2

一種方法是：

<ul class="nav nav-second-level">
  <router-link :to="{ name: somewhere }" tag="li" exact-active-class="IS-ACTIVATED">
            {{Name}}
  </router-link>
</ul>

否則，您不能在父項上進行設置。 我建議改用CSS。 另外，您無需在router-link上指定標記，它的默認值為“ a”。