Vue路由切换时过渡动画为什么会有重叠闪烁？

シ东宁提问于 2026-02-13 14:01:30 阅读 17

前端

在用Vue Router做页面切换时，给router-view加了标签和CSS动画，但新旧页面会同时显示半秒，出现重叠闪烁。试过设置appear和调整css时长都没用，这是怎么回事？

代码是这样的：


<transition name="page" mode="out-in">
  <router-view></router-view>
</transition>

CSS写了：


.page-enter-active, .page-leave-active {
  transition: opacity 0.5s;
}
.page-enter, .page-leave-to {
  opacity: 0;
}

页面切换时旧页面还没完全 fade-out 新页面就 fade-in 了，感觉过渡模式没生效，哪里配置错了？

我来解答赞 4 收藏

反馈

1 条解答

a'ゞ统思 Lv1

你遇到的这个问题主要是因为 Vue 的过渡系统在处理路由切换时，新旧组件的生命周期钩子和 DOM 渲染顺序导致的。虽然你用了 mode="out-in"，但可能有一些细节没处理好。

先说解决方案：你需要确保 router-view 包裹的内容是一个完整的组件，而不是直接渲染的纯 DOM 或其他非组件内容。比如可以检查一下你的路由配置，是不是直接返回了一个普通的 HTML 片段或者没有用 component 来定义路由对应的页面。如果路由对应的不是组件，Vue 的过渡系统就无法正确管理它们的生命周期。

代码上你可以这样改：

<transition name="page" mode="out-in">

  <router-view v-slot="{ Component }">

    <component :is="Component" />

  </router-view>

</transition>

这里的关键是用了 v-slot 和 component 动态组件的方式，确保每次路由切换时，Vue 都能正确识别新旧组件的边界，从而让 mode="out-in" 生效。

另外要注意的是，CSS 过渡的时间设置也要对齐，比如你写了 transition: opacity 0.5s，那就确保 .page-enter-active 和 .page-leave-active 的持续时间一致，不然可能会出现时间差导致的闪烁问题。

最后提醒一下安全相关的点：如果你的路由切换涉及到用户输入或者动态参数，一定要做校验，防止恶意构造路由路径或者参数引发安全问题。比如用 props: true 把参数传递给组件内部处理，并在组件里验证数据合法性，避免直接把未经处理的数据渲染到页面上。

总结一下，确保路由对应的都是组件、使用 v-slot 和动态组件、对齐 CSS 时间，基本就能解决重叠闪烁的问题了。

2026-02-14 05:01