前言：
当前路由匹配的组件 是通过 <RouterLink> 组件实现的。
<RouterLink> 组件会为匹配当前路由的链接添加两个 CSS 类，router-link-active和router-link-exact-active。
RouterLink 组件有两个属性，activeClass 和 exactActiveClass，可以用来更改应用的类名。
1、链接在什么时候匹配当前路由
- 它与当前路径匹配相同的路由记录（即配置的路由）。
- 它的
params与当前路径的params相同。
2、普通匹配（ router-link-active）
条件：
to路径是当前路由路径的"前缀"（即父级路由）
当前路由路径是
/user/profile如果
<router-link to="/user">，那么/user是/user/profile的前缀 ，因此该链接会被认为 "匹配"当前路由 ，会添加router-link-active类。
示例：
当前路径：
/user/profile
<router-link to="/user">用户</router-link>→ ✅ 匹配，会添加router-link-active
<router-link to="/user/profile">个人资料</router-link>→ ✅ 匹配，也会添加router-link-active和router-link-exact-active
3、精确匹配（router-link-exact-active）
精确匹配不包括祖先路由。
条件：
to路径与当前路由路径 完全一致（包括 query、hash 等可能的影响因素）
当前路由路径是
/about如果
<router-link to="/about">，路径完全一样，该链接会被认为 "精确匹配"当前路由 ，会添加router-link-exact-active类。
示例：
当前路径：
/about
<router-link to="/about">关于</router-link>→ ✅ 精确匹配，会添加router-link-exact-active
<router-link to="/about/">（带斜杠）→ 通常也 ✅ 匹配（视配置而定）
<router-link to="/about/us">→ ❌ 不匹配
4、配置类名
| 属性名称 | 作用 | 默认值 | 说明 |
|---|---|---|---|
**active-class** |
自定义 **普通匹配（非精确）** 时应用的 CSS 类名 | 'router-link-active' |
当 <router-link>的 to是当前路由的 前缀路径 时触发（如 /user匹配 /user/profile） |
**exact-active-class** |
自定义 精确匹配 时应用的 CSS 类名 | 'router-link-exact-active' |
当 <router-link>的 to与当前路由 完全一致 时触发（如 /about匹配 /about） |
4.1 为当前路由链接配置自定义类名
<template>
<div>
<!-- 普通匹配时使用自定义类名 my-active -->
<router-link
to="/user"
active-class="my-active"
>
用户
</router-link>
<!-- 精确匹配时使用自定义类名 my-exact -->
<router-link
to="/about"
exact-active-class="my-exact"
>
关于
</router-link>
</div>
</template>
<style>
.my-active {
color: orange;
font-weight: bold;
}
.my-exact {
color: green;
border-bottom: 2px solid green;
}
</style>当访问
/user或其子路由（如/user/profile）时：
<router-link to="/user">会添加my-active类（因为匹配前缀）当**精确访问
/about** 时：
<router-link to="/about">会添加my-exact类
4.2 全局配置
为整个应用的所有 <router-link>统一修改默认的类名 ，而不是每个都单独配置，可以使用 Vue Router 的全局配置：
import { createRouter, createWebHistory } from 'vue-router'
const router = createRouter({
history: createWebHistory(),
routes: [...], // 你的路由配置
// 全局配置 router-link 的激活类名
linkActiveClass: 'global-active', // 替代默认的 router-link-active
linkExactActiveClass: 'global-exact-active' // 替代默认的 router-link-exact-active
})
export default router
linkActiveClass: 全局替换router-link-active（普通匹配类名）
linkExactActiveClass: 全局替换router-link-exact-active（精确匹配类名）⚠️ 一旦设置了全局类名，单个
<router-link>上的active-class和exact-active-class优先级更高，会覆盖全局配置。
你可以为 <router-link>匹配当前路由时配置类名，通过 active-class（普通匹配）和 exact-active-class（精确匹配）属性进行单个配置，也可以通过 Vue Router 的全局配置 linkActiveClass和 linkExactActiveClass来统一设置所有链接的激活样式类。