过渡动效

想要在你的路径组件上使用转场，并对导航进行动画处理，你需要使用 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 动画
至此，本章节的学习就到此结束了，如有疑惑，可对接技术客服进行相关咨询。