active-class是vue router中组件的属性，用于自动为匹配当前路由的链接添加指定css类实现高亮，支持全局配置（linkactiveclass）和单个覆盖，并可配合exact-active-class实现精确匹配控制。

Vue Router 的 active-class 是让导航菜单“自己知道哪一项该高亮”的核心机制，不用手动写 JS 判断路径、也不用监听路由变化——它由 <router-link></router-link> 组件自动管理，关键在于配置方式和样式配合是否到位。

全局统一设一个类名（推荐用于整站一致）

在创建 router 实例时，通过 linkActiveClass 选项指定默认激活类：

• 代码示例（router/index.js）：

export default new Router({
  linkActiveClass: 'nav-active', // 所有 默认用这个类
  routes: [...]
})

• 之后所有 <router-link to="/home">首页</router-link> 匹配当前路由时，会自动添加 nav-active 类；
• 只需在 CSS 中定义：.nav-active { color: #42b883; font-weight: 600; }；
• 优点：一处配置，全站生效，维护成本低。

单个链接单独设（适合局部定制）

当某个菜单项需要不同于全局的高亮样式（比如加下划线、变背景色），直接在标签上用 active-class 属性覆盖：

vue-component-analyzer

递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。

下载

• 写法：<router-link to="/admin" active-class="admin-highlight">后台管理</router-link>；
• 注意：这个设置只影响当前标签，不干扰其他 <router-link></router-link>；
• 可同时使用 exact-active-class 控制「精确匹配」时的样式（例如 /user 不应高亮 /user/profile）。

别忘了 CSS 样式要写对

类名生效的前提是样式能正确命中。常见误区：

• 写了 active-class="active"，但 CSS 写成 a.active {...} —— 如果 <router-link></router-link> 渲染为 <span></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' : ''"></router-link>；
• 点击时更新：@click="selectedKey = item.key"；
• 这样既能保留路由跳转能力，又能叠加业务维度的高亮控制。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！