路由高亮

在实现导航的时候，我们需要给导航添加高亮

链接激活时，应用于渲染的 <a> 的 class

<template>
  <RouterLink exact-active-class="active" to="/">跳转home</RouterLink>
  <RouterLink exact-active-class="active" to="/about">跳转about</RouterLink>

  <RouterView />
</template>

<script lang="ts" setup></script>

<style>
.active {
  color: red;
}
</style>

但是，这样要给每一个跳转标签都要增加exact-active-class="active" ，过于复杂

此时，我们可以进行全局配置

import { createRouter, createWebHistory } from "vue-router";

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  linkExactActiveClass: "active",
  routes: [
    {
      path: "/",
      name: "home",
      meta: {
        requiresAuth: true,
        transition: "slideLeft",
      },
      component: () => import("../views/home/home.vue"),
    },
  ],
});

export default router;