匹配当前路由的链接 | Vue Router

理解路由链接的激活状态

在 Vue Router 应用中，导航组件通常会渲染一组 RouterLink。为了让用户清楚地知道当前所在的位置，我们需要对匹配当前路由的链接进行视觉区分。

自动添加的 CSS 类

RouterLink 组件会自动为匹配当前路由的链接添加两个 CSS 类：

• router-link-active - 匹配当前路由或祖先路由
• router-link-exact-active - 精确匹配当前路由

什么时候链接会匹配当前路由？

RouterLink 被认为是匹配当前路由的条件：

1. 路由记录匹配 - 链接指向的路由记录与当前路径匹配
2. 参数匹配 - 链接的 params 参数与当前路径的 params 相同

💡 重要提示：其他路由属性（如 query 参数）不会被考虑在内。使用别名（alias）的路由也会被认为是匹配的，只要它解析到相同的路由记录和参数。

精确匹配 vs 普通匹配

让我们通过一个例子来理解两者的区别：

const routes = [
  {
    path: '/user/:username',
    component: User,
    children: [
      {
        path: 'role/:roleId',
        component: Role,
      }
    ]
  }
]

<RouterLink to="/user/erina">用户页面</RouterLink>
<RouterLink to="/user/erina/role/admin">角色页面</RouterLink>

场景：当前路径是 /user/erina/role/admin

• 两个链接都会获得 router-link-active 类，因为它们都匹配当前路由的祖先路由
• 只有第二个链接会获得 router-link-exact-active 类，因为它精确匹配当前路由

自定义激活类名

单个链接自定义

<RouterLink
  to="/about"
  active-class="border-indigo-500"
  exact-active-class="border-indigo-700"
>
  关于我们
</RouterLink>

全局自定义

const router = createRouter({
  linkActiveClass: 'border-indigo-500',
  linkExactActiveClass: 'border-indigo-700',
  // ... 其他配置
})

高级自定义技巧

如果需要更复杂的自定义，可以使用 RouterLink 的 v-slot API 进行高级配置。这允许你完全控制链接的渲染逻辑和样式应用。

🎯 最佳实践：在大多数情况下，使用默认的类名机制就足够了。只有在需要特殊视觉设计时才考虑使用高级自定义。