路由高亮

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

链接激活时，应用于渲染的 <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

至此，本章节的学习就到此结束了，如有疑惑，可对接技术客服进行相关咨询。