VueJS 精确主动类答案

【问题标题】：VueJS exact-active-classVueJS 精确主动类
【发布时间】：2018-03-04 02:31:32
【问题描述】：

我有一个使用 Router-link 的菜单，我想在 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”将类设置为父类？

谢谢！

【问题讨论】：

标签： vue.js vuejs2 vue-component vue-router

【解决方案1】：

如果$route.name 是somewhere，您可以使用v-if 检查您所在的路线并添加类

<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>

【讨论】：

非常感谢！这就是我想要的！！ =)

【解决方案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”。

【讨论】：

嗯，它不起作用，我必须点击“a”元素。它需要“router-link-exact-active”类。
哦，所以你说它必须是一个锚元素，例如“一个”？
实际上没有...我只是想知道是否有办法通过当前选定的路由器视图将“IS-ACTIVATED”类放在父元素（ li ）上。
exact-active-class 仅适用于路由器链接组件。它不适用于其父元素。