VueJS 精确主动类

2022-01-25 00:00:00 vue.js vue-router vue-component vuejs2

我有一个使用 Router-link 的菜单，我想在 Router-link 被激活时将Active"类放在li"上.

I have a menu using Router-link, and i want to put class "Active" on "li" when the Router-link was actived.

<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"将类设置为父类?

Is there a way to set a class to parent using "exact-active-class"?

谢谢！

推荐答案

你可以使用 v-if 来检查你所在的路由，如果 $route.name 是 某处

You can use v-if to check which route you're in and add class if $route.name is 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>

相关文章