Vue3 路由跳转动画效果，并且指定从a跳转到b时才会触发这个动画效果的方法：

App.vue

<template>
  <router-view v-slot="{ Component, route }">
    <transition :name="transitionName" mode="out-in">
      <component :is="Component" :key="route.path" />
    </transition>
  </router-view>
</template>
<script setup>
import { useRouter } from 'vue-router'
import { ref } from 'vue'

/**
 * 路由拦截，当页面是从 page1 跳转到 page2 时，添加一个过渡效果，赋值变量为 'fade'，其他时候则不要动画效果
 */
const transitionName = ref('')
const router = useRouter()
router.beforeEach((to, from, next) => {
  if (from.name === 'page1' && to.name === 'page2') {
    transitionName.value = 'fade'
  } else {
    transitionName.value = ''
  }
  next()
})
</script>
<style>
/* 1. 淡入淡出效果 */
.fade-enter-active,
.fade-leave-active {
  transition: all 0.5s ease;
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
  transform: scale(1.08);
}
</style>