Vue3 如何禁止RouterView首次加载触发过渡实现轮播式路由切换

基于Vue3 + Vue Router实现路由过渡动画时，路由跳转的平滑切换效果运行正常，但存在异常表现：

• 首次加载页面、按下F5刷新页面时，当前页面会自动播放入场过渡动画，视觉效果较差
• 预期目标：仅路由主动跳转时触发过渡动画，首次加载/刷新页面不触发初始动画，最终实现类似轮播的路由切换交互体验

App.vue 代码 #

<script setup>
import {RouterView} from 'vue-router'
import Header from "@/components/Header.vue";
</script>

<template>
  <div class="absolute container min-w-full h-screen bg-blue-500 overflow-hidden">
    <Header/>
    <RouterView v-slot="{ Component, route }">
      <Transition :leave-active-class="route.meta.leaveClass" :enter-active-class="route.meta.enterClass">
        <component :is="Component"/>
      </Transition>
    </RouterView>
  </div>
</template>

路由配置代码 #

routes: [
  {
    path: '/',
    name: 'home',
    component: HomeView,
    meta: {
      leaveClass: "animate__animated animate__slideOutUp",
      enterClass: "animate__animated animate__slideOutUp"
    }
  },
  {
    path: "/about",
    name: 'about',
    component: () => import('../views/AboutView.vue'),
    meta: {
      leaveClass: "animate__animated animate__slideOutUp",
      enterClass: "animate__animated animate__slideOutUp"
    }
  }
]

核心逻辑：增加状态标记区分「初始加载/刷新」和「主动路由跳转」场景，页面首次挂载完成前禁用所有过渡，首次加载流程结束后，再开启路由跳转的过渡效果。

具体修改步骤 #

1. 修改App.vue的script逻辑，新增过渡开关状态，在页面首次挂载完成后再开启过渡

<script setup>
import { ref, onMounted } from 'vue'
import { RouterView, useRouter } from 'vue-router'
import Header from "@/components/Header.vue";

const router = useRouter()
// 初始状态：关闭过渡，避免首屏/刷新播放动画
const enableRouteTransition = ref(false)

onMounted(() => {
  // 首屏加载完成后，后续路由跳转才触发过渡
  router.afterEach(() => {
    if (!enableRouteTransition.value) enableRouteTransition.value = true
  })
})
</script>

2. 修改模板中的Transition组件，动态绑定过渡类名，同时给路由组件绑定唯一key保证动画正确触发

<template>
  <div class="absolute container min-w-full h-screen bg-blue-500 overflow-hidden">
    <Header/>
    <RouterView v-slot="{ Component, route }">
      <Transition 
        :leave-active-class="enableRouteTransition ? route.meta.leaveClass : ''" 
        :enter-active-class="enableRouteTransition ? route.meta.enterClass : ''"
      >
        <component :is="Component" :key="route.fullPath"/>
      </Transition>
    </RouterView>
  </div>
</template>

轮播效果优化提示 #

当前路由配置中的入场动画类使用了animate__slideOutUp（滑出类），不符合入场动画逻辑，建议替换为对应的滑入类animate__slideInUp。如果需要实现类似轮播的方向跟随效果，可以在路由守卫中根据导航的前进/后退状态，动态给路由meta赋值不同方向的滑入、滑出类，即可实现和原生轮播一致的方向跟随切换体验。

内容的提问来源于stack exchange，提问作者Jean-Philippe Mongeau