我正在使用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>
任何逻辑和解决方案?请帮帮我。
答案 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