VueJS exact-active-class

Question

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>

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

Thanks!

Answer 1

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>

Answer 2

One way to do this might be:

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

Otherwise, no, you can't set it on a parent. I would recommend adapting your CSS instead. Also, you don't need to specify tag on router-link, it defaults to "a".