资讯详情

资讯详情

【已解决】Vue Transition模板组件加mode=“out-in”导致页面空白(注释破坏了路由过渡)

【已解决】Vue Transition模板组件加mode“out-in”导致页面空白注释破坏了路由过渡【现象】进入特定页面后再跳转到其他页面均会白屏但是刷新后就会加载。控制台无红色报错 菜单标签栏正常 只有内容区白。这排除了“组件崩溃”会抛红错和“布局层挂了”菜单也会消失剩下的解释只有一种——dev 模式下路由 out-in 过渡因组件根为 fragment 被挂起新页面从未挂载导致的白屏问题。【分析判断】挂起的原因藏在模板第一行template !-- 模块用途… -- ← 顶层注释 div classapp-container ... /div /templateAppMain.vue的路由出口结构是:transition modeout-in keep-alive ... /keep-alive /transitionVue 3 的Transition要求被包裹的组件是单根节点否则无法确定动画目标。回测页的模板在根div之前写了模块说明注释。这些注释在生产构建时会被剥离但在vite dev 模式下会被保留进虚拟 DOM组件根节点随之从“单个 div”变成“注释 div”的片段fragment。于是过渡流程在modeout-in的语义下断裂旧页面先执行离开动画Vue 等待的是“离开完成 → 新组件进入”这个序列但由于回测页的根是 fragmentTransition 拿不到可动画的单根目标离开阶段无法正常收尾新页面的 enter 被直接吞掉——app-main内容区从此空白且这次挂起会污染后续所有导航所以回到其他的界面也跟着白屏。【解决方式】模块说明注释直接删除或者移入根元素内部并在模板内加注释明示被 transitionkeep-alive 包裹的页面模板顶层禁止放置注释节点。【教训】路由级 Transition 对单根的约束在 dev/prod 表现不同布局层白屏且无红错时优先怀疑 Transition 挂起而不是组件崩溃。
觉得有用,分享给同行:

为您的企业打造数字门面

稳重轻奢商务风格,端正雅致视觉,长效耐看不易过时。

立即咨询 →