Не работает ссылка на активный роутер Vuejs, пробовал несколькими способами

Question

Я не могу заставить активную кнопку (метка роутера) загореться.

Вот мой код:

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

Когда я распечатываю $route.path, он возвращает правильный путь, а button.path - это данные, которые у меня есть в объекте данных, и это работает. Таким образом, условие должно быть правильным. Но класс 'is-active' не активирован. (Этот поток: VueJS точный активный класс )

Если я жестко закодирую класс 'is-active', он работает.

Когда я использую a:hover, a:visited, a:link, это работает, но a:active не работает: D. Я попытался a:router-link-active, но это не работает. (Этот поток: Как активировать стиль VueJS router-link )

Я попытался добавить linkActiveClass: 'is-active' в файл /router/index.js, как было предложено. Это не работает. (Этот поток: Bulma navbar и активная ссылка маршрутизатора VueJS )

Кто-нибудь знает почему? Или есть еще предложения? Заранее спасибо!

Answer 1

Кажется, ваша проблема в состоянии класса.Возможно, попробуйте использовать == вместо === в вашем :class?

Я бы добавил комментарий вместо ответа, если бы у меня было достаточно репутации:)