vue.js路由选中状态加一个类名

admin 2026年02月11日 11:10 102 0

在Vue.js中，为路由选中状态添加类名可通过vue-router的$route对象结合动态绑定实现，常用方法是在导航组件（如`或自定义元素）上使用:class，通过计算属性或三元表达式判断当前路由是否匹配，在中直接使用active-class属性配置激活样式；若为自定义元素，可通过$route.path或$route.name与目标路径比较，动态添加active`类名，再结合CSS实现高亮效果，核心是利用路由匹配状态动态绑定类名，提升用户对当前导航项的视觉识别。

Vue.js 路由选中状态高亮：动态添加类名的实现方法

在单页面应用（SPA）开发中，导航栏的高亮显示是提升用户体验的关键环节，当用户访问特定路由时，对应的菜单项需要视觉上突出显示（例如改变文字颜色、背景色、添加下划线等），让用户能清晰地感知当前所在页面，在 Vue.js 中，结合 Vue Router，我们可以通过为当前路由匹配的菜单项动态添加类名来实现这一效果，本文将详细介绍几种常见的实现方法，从基础到进阶,覆盖不同场景下的需求。

核心原理：路由匹配与类名绑定

实现路由选中状态高亮的核心逻辑在于判断当前路由路径是否与菜单项的目标路径（或其模式）匹配，一旦匹配成功，便动态地为该菜单项添加预设的类名，从而触发相应的样式变化，Vue Router 提供了强大的内置路由信息对象 $route，我们可以通过访问 $route.path（当前完整路径）、$route.matched（匹配到的路由记录数组）或 $route.params（动态参数）等信息来判断匹配关系，结合 Vue 的动态类名绑定（class）,即可实现灵活的样式切换。

基础实现：使用 `router-link` 的 `active-class`

Vue Router 的核心组件 router-link 提供了便捷的 active-class 属性，专门用于设置路由激活状态时自动添加的类名，这是最简单、最推荐的基础实现方式，无需开发者手动判断路由状态，Vue Router 会自动处理匹配逻辑。

基础用法

假设我们有以下路由配置和菜单结构：

// router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'
import User from '../views/User.vue'
const routes = [
  { path: '/home', component: Home },
  { path: '/about', component: About },
  { path: '/user', component: User }
]
const router = createRouter({
  history: createWebHistory(),
  routes
})
export default router

在模板中，使用 router-link 并设置 active-class：

<template>
  <nav>
    <router-link to="/home" active-class="active">首页</router-link>
    <router-link to="/about" active-class="active">lt;/router-link>
    <router-link to="/user" active-class="active">用户</router-link>
  </nav>
</template>
<style>
.active {
  color: #42b983; /* 激活时的文字颜色 */
  font-weight: bold;
}
</style>

效果说明： 当用户访问 /home 时，“首页”链接会自动添加 active 类名，样式生效；当用户切换到 /about 或 /user 时，“首页”的 active 类名会自动移除，而当前路由对应的链接会自动获得 active 类名。

全局配置 `active-class`

如果多个 router-link 需要使用相同的激活类名，为了避免在每一处重复设置 active-class，可以在路由实例中进行全局配置 linkActiveClass：

// router/index.js
const router = createRouter({
  history: createWebHistory(),
  routes,
  linkActiveClass: 'active' // 全局设置激活类名
})

配置后，所有未单独设置 active-class 的 router-link 都会默认使用 active 作为激活类名。

精确匹配：`linkExactActiveClass`

默认情况下，active-class 的匹配是“模糊匹配”（也称为“包含匹配”）：只要 to 属性指定的路径是当前路径的前缀,就会触发激活。

to="/user" 会在当前路径为 /user、/user/123、/user/profile 时都激活（因为 /user 是这些路径的前缀）。

如果需要实现“精确匹配”（仅当路径完全一致时激活），可以使用 linkExactActiveClass：

// router/index.js
const router = createRouter({
  history: createWebHistory(),
  routes,
  linkActiveClass: 'active',       // 模糊匹配时的类名
  linkExactActiveClass: 'exact-active' // 精确匹配时的类名
})

在模板中为需要精确匹配的 router-link 设置 exact-active-class：

<router-link to="/user" exact-active-class="exact-active">用户</router-link>

效果说明：

当当前路径为 /user 时：
- active 类名（模糊匹配）会添加。
- exact-active 类名（精确匹配）会添加。
当当前路径为 /user/123 或 /user/profile 时：
- active 类名（模糊匹配）会添加（因为 /user 是前缀）。
- exact-active 类名（精确匹配）不会添加（因为路径不完全等于 /user）。

这种机制非常适合处理主菜单项与其子路由的关系：主菜单项在模糊匹配下保持高亮（表示属于该模块）,而精确匹配的类名可以用于区分是否在模块的根路径下。

进阶实现：动态路由与复杂匹配

在实际项目中，路由结构往往更加复杂，包含动态参数（如 /user/:id）、嵌套路由（如 /user/profile）或需要自定义匹配逻辑的场景。active-class 的默认行为可能无法满足所有需求,以下是几种常见场景的处理方法。

动态路由匹配

假设路由配置包含动态参数：

const routes = [
  { path: '/user/:id', component: User },
  { path: '/user/:id/profile', component: UserProfile },
  { path: '/user/:id/settings', component: UserSettings }
]

菜单项需要根据动态参数跳转：

<!-- 假设 userId 是组件中的数据 -->
<router-link :to="'/user/' + userId" active-class="active">用户 {{ userId }}</router-link>

问题： 默认的 active-class 模糊匹配会导致 /user/:id 的菜单项在访问 /user/:id/profile 或 /user/:id/settings 时也保持高亮，这通常是期望的行为（表示属于该用户模块）。

需求（进阶）： 如果需要更严格的匹配，只希望菜单项在精确匹配 /user/:id（即用户主页）时高亮，而在访问其子路由（如 /user/:id/profile）时不高亮,则需要手动控制类名绑定。

解决方案： 利用 $route.matched 数组或 $route.path 进行判断。$route.matched 包含当前路由匹配的所有嵌套路由记录，我们可以检查匹配记录中是否存在精确匹配 /user/:id 的记录。

<template>
  <router-link 
    :to="'/user/' + userId" 
    :class="{ active: isUserExactMatch }

标签： #js #路由 #选中状态 #类名