在 Vue 中添加 is-active class Bulma 到路由器

Question

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

但现在我正在尝试使用 class 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>

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

Answer 1

要添加 class，只需将 class 属性放在上面即可：

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

每个组件都接受它。它会将 class 应用于组件模板内的第一个元素。在 router-link 的例子中，它是一个 <a> 标签。

但请记住，router-link 接受一个属性 active-class，您可以使用它来将 css class 添加到当前活动的 link，这听起来像你想要做的。所以这可能更好，因为 Vue 会检测您当前所在的路线并为您放置 class。

看起来像这样：

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

如果你想在每个活动 router-link 上使用这个 class，你也可以在路由器的构造函数中设置 linkActiveClass 选项，这样你就不必设置 active-class 在每个 link.

Answer 2

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

import Router from 'vue-router'

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

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

在 Vue 中添加 is-active class Bulma 到路由器

Add is-active class Bulma to router in Vue

javascript

vue.js

vue-router

vuejs2