添加路由切换过度效果

src/layouts/page/index.vue

 <template>
   <RouterView>
     <template #default="{ Component, route }">
-      <Transition name="Child" mode="out-in" appear>
-        <div :key="route.fullPath">
+      <transition name="fade-slide" mode="out-in" appear>
+        <div :key="route.path">
           <keep-alive v-if="route.meta?.keepAlive">
-            <component :is="Component" :key="route.fullPath"></component>
+            <component :is="Component" :key="route.path"></component>
           </keep-alive>
-          <component v-else :is="Component" :key="route.fullPath"></component>
+          <component v-else :is="Component" :key="route.path"></component>
         </div>
-      </Transition>
+      </transition>
     </template>
   </RouterView>
 </template>
 
 <script lang="ts" setup></script>
-<style></style>
+<style scoped>
+.fade-slide-leave-active,
+.fade-slide-enter-active {
+  transition: all 0.3s;
+}
+
+.fade-slide-enter-from {
+  transform: translateX(-30px);
+  opacity: 0;
+}
+
+.fade-slide-leave-to {
+  transform: translateX(30px);
+  opacity: 0;
+}
+</style>