Vuejs active router link does not work, tried multipled ways

Question

I cannot make the active button (router-link tag) to light up.

Here is my code:

<div class="bottom-buttons">                                          
 <span v-for="button in buttons" class="button" :class="{ 'is-active': $route.path === button.path}">
  <router-link :to="button.path">
   <i :class="button.iclass"></i>
    <p class="button-label">{{button.label}}  </p> 
  </router-link>
 </span>                                                                
</div>

When I print out $route.path it returns the right path, and button.path is the data I have in the data object, and it works. So the condition should be right. But the 'is-active' class is not activated. (This thread: VueJS exact-active-class)

If I hard-code the 'is-active' class, it works.

When I use a:hover, a:visited, a:link it works, but a:active does not work :D. I have tried a:router-link-active but it does not work. (This thread: How to VueJS router-link active style)

I have tried to add linkActiveClass: 'is-active' in the /router/index.js file as suggested. It does not work. (This thread: Bulma navbar and VueJS router active link)

Anybody knows why? Or have more suggestions? Thank you in advance!

What does your is-active class look like? Does it override existing styles? — dziraf
.is-active { color: green } If I hardcode it the class works. — Linh Chi Nguyen
Try to change it to .is-active { color: green !important; } — dziraf
There's nothing wrong with your code except you keep buttons as span instead of router-link with tag="button" — dziraf
yes, that works !!! with !important and v-for on router-link :D — Linh Chi Nguyen

Itamar Smirra Itamar Smirra · Accepted Answer · 2019-05-07T15:37:15

It seems to be that your problem is in the class condition. Maybe try to use == instead of === in your :class?

I would have add a comment instead of an answear if i had enough reputation :)

Vuejs active router link does not work, tried multipled ways

1 Answers