想要在你的路径组件上使用转场，并对导航进行动画处理，你需要使用 v-slot API (opens new window)：

<router-view v-slot="{ Component }">
  <transition name="fade">
    <component :is="Component" />
  </transition>
</router-view>

单个路由的过渡

上面的用法会对所有的路由使用相同的过渡。

过渡动效 | 单个路由的过渡 (opens new window)

如果你想让每个路由的组件有不同的过渡，你可以将元信息 (opens new window)和动态的 name 结合在一起，放在<transition> 上：

此处用Animate.css (opens new window)动效

在App.vue中的router-view添加动效

<router-view #default="{route,Component}">
    <transition  :enter-active-class="`animate__animated ${route.meta.transition}`">
        <component :is="Component"></component>
	</transition>
</router-view>

在route/index.ts

// 元信息定义类型
declare module 'vue-router'{
     interface RouteMeta {
        title:string,
        transition:string,
     }
}
 
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      component: () => import('@/views/Login.vue'),
      meta:{
         title:"登录页面",
         transition:"animate__fadeInUp",
      }
    },
    {
      path: '/index',
      component: () => import('@/views/Index.vue'),
      meta:{
         title:"首页！！！",
         transition:"animate__bounceIn",
      }
    }
  ]
})

基于路由的动态过渡

根据目标路由和当前路由之间的关系，动态地确定使用的过渡。使用和刚才非常相似的片段：

<router-view v-slot="{ Component, route }">
    <transition name="fade-transform" mode="out-in">
        <keep-alive>
        <component :is="Component" :key="route.path"/>
            </keep-alive>
	</transition>
</router-view>