Question

我有一个使用Router-link的菜单，我想在激活路由器链接时将“Active”类放在“li”上。

<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。此外，您不需要在路由器链接上指定标记，它默认为“a”。

VueJS精确活跃级

2 个答案: