代码之家 › 专栏 › 技术社区 › Johnson

VueJS精确活动类

vue-router vue-component vuejs2 vue.js

8

Johnson · 技术社区 · 8 年前

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

有没有办法使用“精确活动类”将类设置为父类?

2 回复 | 直到 8 年前

1

7

Quoc-Anh Nguyen 8 年前

您可以使用 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>

2

1

Ian Walter 8 年前

一种方法可能是:

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