过渡动效

想要在你的路径组件上使用转场，并对导航进行动画处理，你需要使用 v-slot API 和 Transition API

<template>
  <RouterLink to="/">跳转home</RouterLink>
  <RouterLink to="/about">跳转about</RouterLink>

  <RouterView v-slot="{ Component, route }">
    <Transition :name="route.meta.transition || 'fade'">
      <component :is="Component" />
    </Transition>
  </RouterView>
</template>

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

<style>
/* fade */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

/* slideLeft */
.slideLeft-enter-active,
.slideLeft-leave-active {
  transition: opacity 1s ease;
}

.slideLeft-enter-from,
.slideLeft-leave-to {
  opacity: 0;
}

/* slideRight */
.slideRight-enter-active,
.slideRight-leave-active {
  transition: opacity 2s ease;
}

.slideRight-enter-from,
.slideRight-leave-to {
  opacity: 0;
}
</style>

路由配置

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

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

export default router;

警告

使用 Transition API 包括路由时，要有每个路由页面下必须有且只能有一个根组件

<template>
  <div>
    <p>about</p>
  </div>
</template>

在上面的示例中，如果在路由元信息中定义了动画的名称，就加载该名称的动画，如果没有定义，则会默认执行 fade 动画