Vue路由中如何使用Bulma的is-active类标记当前导航？

嘿，这事儿其实很简单！Vue Router本身就支持自定义激活状态的类名，刚好能完美适配Bulma的is-active，不用再手动给外层<a>标签加类啦，我给你一步步讲：

1. 配置Vue Router的激活类名 #

在创建Vue Router实例的时候，通过linkActiveClass和linkExactActiveClass两个配置项，把默认的激活类替换成Bulma的is-active：

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from './views/Home.vue'
import About from './views/About.vue'

Vue.use(VueRouter)

const routes = [
  { path: '/', name: 'Home', component: Home },
  { path: '/about', name: 'About', component: About }
]

const router = new VueRouter({
  routes,
  // 替换默认的激活类为Bulma的is-active
  linkActiveClass: 'is-active',
  // 精确匹配的激活类也设为is-active（对应你之前用的exact属性）
  linkExactActiveClass: 'is-active'
})

export default router

2. 简化你的导航模板 #

你之前的写法是把<router-link>嵌套在<a>标签里，其实完全没必要——<router-link>默认会渲染成<a>标签，直接把Bulma的navbar-item类加到<router-link>上就行，激活时Vue Router会自动给它加上is-active：

<!-- 原来的冗余写法可以丢掉啦 -->
<!-- <a class="navbar-item is-active"> 
  <router-link to="/" exact>Home</router-link> 
</a> -->

<!-- 新的简洁写法 -->
<router-link to="/" exact class="navbar-item">Home</router-link>
<router-link to="/about" exact class="navbar-item">About</router-link>

为什么这样可行？ #

• linkActiveClass：控制模糊匹配时的激活类（比如访问/user/123时，/user对应的链接会被激活）
• linkExactActiveClass：控制精确匹配时的激活类（只有访问完全匹配的路径时才激活，对应你之前用的exact属性）
  把两者都设为is-active，不管是哪种匹配场景，Bulma的激活样式都会生效。

额外提示 #

如果你有嵌套路由（比如/dashboard下的子路由），可以根据需求调整两个类名的配置——比如只把linkExactActiveClass设为is-active，而linkActiveClass用自定义类，不过大部分导航场景下，把两者都设为is-active就够用啦。

内容的提问来源于stack exchange，提问作者Thuan Nguyen