Vue Router （匹配当前路由的链接和类名配置）

前言：

当前路由匹配的组件是通过 <RouterLink> 组件实现的。

<RouterLink> 组件会为匹配当前路由的链接添加两个 CSS 类，router-link-active 和 router-link-exact-active。

RouterLink 组件有两个属性，activeClass 和 exactActiveClass，可以用来更改应用的类名。

1、链接在什么时候匹配当前路由

• 它与当前路径匹配相同的路由记录（即配置的路由）。
• 它的 params 与当前路径的 params 相同。
  • 如果你使用了嵌套路由，任何指向祖先路由的链接也会被认为是匹配当前路由的，只要相关的 params 匹配。

  • 其他路由属性，例如 query，不会被考虑在内。

  • 路径不一定需要完全匹配。例如，使用 alias 仍然会被认为是匹配的，只要它解析到相同的路由记录和 params。

  • 如果一个路由有 redirect，在检查链接是否匹配当前路由时不会跟随重定向。

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-activelinkExactActiveClass: '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来统一设置所有链接的激活样式类。