活动链接

应用程序通常会有一个导航组件，它渲染一个 RouterLink 组件列表。在该列表中，我们可能希望将链接到当前活动路由的样式与其他链接区分开来。

RouterLink 组件为活动链接添加了两个 CSS 类，router-link-active 和 router-link-exact-active。要了解它们之间的区别，我们首先需要考虑 Vue Router 如何确定链接是活动的。

何时链接处于活动状态？

如果满足以下条件，则 RouterLink 被认为是活动的

1. 它与当前位置匹配相同的路由记录（即配置的路由）。
2. 它与当前位置的params具有相同的值。

如果你使用的是嵌套路由，如果相关的params匹配，则任何指向祖先路由的链接也将被视为活动链接。

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

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

如果路由具有重定向，则在检查链接是否处于活动状态时不会遵循它。

精确活动链接

精确匹配不包括祖先路由。

假设我们有以下路由

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

然后考虑这两个链接

<RouterLink to="/user/erina">
  User
</RouterLink>
<RouterLink to="/user/erina/role/admin">
  Role
</RouterLink>

如果当前位置路径是/user/erina/role/admin，那么这两个链接都将被视为活动，因此类router-link-active将应用于这两个链接。但只有第二个链接会被视为精确，因此只有第二个链接会具有类router-link-exact-active。

配置类

RouterLink 组件有两个 props，activeClass 和 exactActiveClass，可用于更改应用的类的名称

<RouterLink
  activeClass="border-indigo-500"
  exactActiveClass="border-indigo-700"
  ...
>

默认类名也可以通过将linkActiveClass和linkExactActiveClass选项传递给createRouter()来全局更改

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

有关使用v-slot API 进行更高级自定义技术的更多信息，请参阅扩展 RouterLink。