active-class是Vue Router中<router-link>组件的属性，用于自动为匹配当前路由的链接添加指定CSS类实现高亮，支持全局配置（linkActiveClass）和单个覆盖，并可配合exact-active-class实现精确匹配控制。
Vue Router 的 active-class 是让导航菜单“自己知道哪一项该高亮”的核心机制，不用手动写 JS 判断路径、也不用监听路由变化——它由 <router-link> 组件自动管理，关键在于配置方式和样式配合是否到位。
全局统一设一个类名（推荐用于整站一致）
在创建 router 实例时，通过 linkActiveClass 选项指定默认激活类：
- 代码示例（router/index.js）：
linkActiveClass: 'nav-active', // 所有 <router-link> 默认用这个类
routes: [...]
})
- 之后所有
<router-link to="/home">首页</router-link>匹配当前路由时，会自动添加nav-active类； - 只需在 CSS 中定义：
.nav-active { color: #42b883; font-weight: 600; }； - 优点：一处配置，全站生效，维护成本低。
单个链接单独设（适合局部定制）
当某个菜单项需要不同于全局的高亮样式（比如加下划线、变背景色），直接在标签上用 active-class 属性覆盖：
- 写法：
<router-link to="/admin" active-class="admin-highlight">后台管理</router-link>； - 注意：这个设置只影响当前标签，不干扰其他
<router-link>； - 可同时使用
exact-active-class控制「精确匹配」时的样式（例如/user不应高亮/user/profile）。
别忘了 CSS 样式要写对
类名生效的前提是样式能正确命中。常见误区：
立即学习“前端免费学习笔记（深入）”；
- 写了
active-class="active"，但 CSS 写成a.active {...}—— 如果<router-link>渲染为<span>或带包裹元素，选择器可能失效； - 更稳妥写法是直接用类名本身：
.active { ... }，或结合默认前缀：.router-link-active { ... }； - 若需区分「包含匹配」和「精确匹配」，两个类可以不同：
.router-link-active { opacity: 1; }<br>.router-link-exact-active { font-weight: bold; }。
配合 Vue 响应式状态做增强控制（进阶）
当菜单逻辑复杂（比如折叠分组、权限动态显隐），单纯靠路由匹配不够时，可结合 data 状态手动控制：
- 定义响应式字段：
data() { return { selectedKey: 'dashboard' } }； - 菜单项绑定：
<router-link :to="item.path" :active-class="item.key === selectedKey ? 'group-active' : ''">； - 点击时更新：
@click="selectedKey = item.key"； - 这样既能保留路由跳转能力，又能叠加业务维度的高亮控制。
