VueJS 精确主动类

织梦狗教程前端问题

2022-01-01

VueJS exact-active-class(VueJS 精确主动类)

本文介绍了VueJS 精确主动类的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个使用 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>

这篇关于VueJS 精确主动类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！