在Vue中向路由器添加is-active类Bulma

时间:2018-04-12 10:49:22

标签: javascript vue.js vuejs2 vue-router

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

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

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

2 个答案:

答案 0 :(得分:6)

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

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

答案 1 :(得分:0)

要添加一个类,只需在其上添加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