在 Vue 中将 is-active 类 Bulma 添加到路由器答案

【问题标题】：Add is-active class Bulma to router in Vue在 Vue 中将 is-active 类 Bulma 添加到路由器
【发布时间】：2018-04-12 10:49:22
【问题描述】：

我正在使用 Vue js 开发路由器。我通过为每个<router-link> 添加router-link-active 和exact 属性的样式，在导航栏中显示当前链接。它工作正常。

但现在我正在尝试使用 is-active 类（Bulma CSS）来做到这一点。我该怎么做？。

代码

<a class="navbar-item is-active">
      <router-link to="/" exact>Home</router-link>
    </a>
    <a class="navbar-item">
        <router-link to="/about" exact>About</router-link>
    </a>
    <a class="navbar-item">
        <router-link to="/information" exact>Information</router-link>
    </a>

任何逻辑和解决方案？请帮帮我。

【问题讨论】：

标签： javascript vue.js vuejs2 vue-router

【解决方案1】：

您可以使用linkActiveClass 选项在vue-router 构造函数中指定活动类的名称。

import Router from 'vue-router'

export default new Router({
 linkActiveClass: 'is-active',
 mode: 'history',
 routes: [ ... ]
})

这会将is-active 类添加到活动路由器链接而不是router-link-active。在此处阅读文档：https://router.vuejs.org/en/api/options.html#linkactiveclass

【讨论】：

另见linkExactActiveClass 选项。您还可以通过设置 exact-active-class="" 和 active-class="" 属性来覆盖特定的 router-link 项目。

【解决方案2】：

要添加一个类，只需将class 属性放在它上面：

<router-link class="is-active"></router-link>

每个组件都接受这一点。它将类应用到组件模板中的第一个元素。在router-link 的情况下，它是一个<a> 标记。

但请记住，router-link 接受属性 active-class，您可以使用该属性将 css 类放入当前活动的链接，这听起来像是您正在尝试做的事情。所以这可能会更好，因为 Vue 会检测你当前所在的路线并为你放置类。

看起来像这样：

<router-link active-class="is-active"></router-link>

如果您想在每个活动的router-link 上使用此类，您还可以在路由器的构造函数中设置linkActiveClass 选项，这样您就不必在每个链接中设置active-class。

【讨论】：