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!

score 8 · Accepted Answer · answered Sep 22 '17 at 14:14

8

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>

answered Sep 22 '17 at 14:14

Quoc-Anh Nguyen

4,798
1
22
34

Thanks a lot! That's what i want !! =) – Johnson Sep 22 '17 at 14:19

Ian Walter · Answer 2 · 2017-09-22T14:05:25.757

1

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

edited Sep 22 '17 at 14:05

answered Sep 22 '17 at 13:33

Ian Walter

882
2
8
23

Hmmm it did not work, i have to click on "a" element. And it takes "router-link-exact-active" class. – Johnson Sep 22 '17 at 14:00
Oh so you're saying it has to be an anchor element, e.g. "a"? – Ian Walter Sep 22 '17 at 14:02
actually no... I just want to know if there is a way to put "IS-ACTIVATED" class on parent element ( li ) by the current router view selected. – Johnson Sep 22 '17 at 14:10
1

`exact-active-class` only works on a router-link component. It will not work on its parent element. – Ian Walter Sep 22 '17 at 14:13

VueJS exact-active-class

2 Answers2

Linked