Vuejs主动路由器链接不起作用，尝试了多种方法答案

【问题标题】：Vuejs active router link does not work, tried multipled waysVuejs主动路由器链接不起作用，尝试了多种方法
【发布时间】：2019-09-25 07:15:12
【问题描述】：

我无法使活动按钮（路由器链接标签）亮起。

这是我的代码：

<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 exact-active-class）

如果我硬编码 'is-active' 类，它可以工作。

当我使用a:hover, a:visited, a:link 时，它可以工作，但a:active 不起作用：D。我试过a:router-link-active，但它不起作用。（本帖：How to VueJS router-link active style）

我已尝试按照建议在/router/index.js 文件中添加linkActiveClass: 'is-active'。这是行不通的。（本帖：Bulma navbar and VueJS router active link）

有人知道为什么吗？或者有更多建议？提前谢谢！

【问题讨论】：

您的is-active 班级是什么样的？它会覆盖现有样式吗？
.is-active { color: green } 如果我对其进行硬编码，则该类可以工作。
尝试改成.is-active { color: green !important; }
除了将按钮保留为span 而不是router-link 和tag="button" 之外，您的代码没有任何问题
是的，这行得通！在router-link 上使用!important 和v-for：D

标签： vue.js vue-router routerlinkactive

【解决方案1】：

看来您的问题出在课堂条件下。也许尝试在您的:class 中使用== 而不是===？

如果我有足够的声誉，我会添加评论而不是 answear :)

【讨论】：

尝试将按钮 span 放在 router-link 标记和 router-link 上的 v-for 内。告诉我。