嵌套路由闪烁本质是DOM渲染断层，可通过transition包裹router-view（mode="out-in"）、keep-alive缓存组件、骨架屏占位及避免布局塌陷等方案解决。
嵌套路由加载时出现闪烁，本质是子组件切换过程中 DOM 渲染断层或样式重置导致的视觉跳变。不是 bug，而是默认行为——router-view 替换组件时若无过渡控制，浏览器会瞬间卸载旧内容、插入新内容，尤其在父子组件样式不一致或异步加载延迟时更明显。
给 router-view 加统一过渡动画
这是最直接、兼容性好、效果稳定的方案。用 <transition></transition> 包裹根级 <router-view></router-view>，并设置 mode="out-in"，确保旧组件完全退出后再渲染新组件。
- 在
App.vue或布局组件中这样写：
- CSS 示例（淡入淡出）：
立即学习“前端免费学习笔记（深入）”；
从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。
- 注意：命名视图（多个
<router-view name="xxx"></router-view>）需分别包裹，或统一用<keep-alive></keep-alive>+ 过渡组合
配合 keep-alive 缓存子组件状态
嵌套路由中，频繁切换同级子路由（如用户页下的“资料”“动态”“设置”）时，重复创建销毁会加剧闪烁感。用 <keep-alive></keep-alive> 可保留组件实例和内部状态，避免重新渲染。
- 在父布局组件中这样写：
- 可加
include精确控制缓存哪些子组件，避免内存堆积 - 搭配
activated/deactivated生命周期做数据刷新，比mounted更精准
子路由加载前统一占位与骨架屏
当子组件使用懒加载（import()），首次进入可能白屏或抖动。可在父组件中预设加载态，让视觉连续。
- 在父组件模板中用
v-if控制显示逻辑：
<script><br>export default {<br> data() { return { loading: true } },<br> watch: {<br> '$route'(to, from) {<br> if (to.matched.some(r => r.components.default?.__asyncLoader)) {<br> this.loading = true<br> }<br> }<br> },<br> beforeRouteUpdate(to, from, next) {<br> next()<br> this.loading = false // 切换完成后关闭 loading<br> }<br>}<br></script>
- 也可用第三方骨架屏库（如
vue-skeleton-loader）提升体验一致性
避免常见触发闪烁的操作
有些写法看似合理，实则放大闪烁感：
- 在子组件里反复调用
this.$router.push()或router.replace()—— 容易引发导航冲突，建议加防抖或用router.push({ ... }).catch(err => {})忽略重复导航错误 - 父组件未设固定高度/容器样式，导致子组件加载前后布局塌陷重排
- 子组件内使用
v-show切换内容，但 CSS 动画未隔离作用域，影响外层过渡 - 嵌套路由配置中漏写空路径子路由（
{ path: '', component: DefaultChild }），导致访问父路径时<router-view></router-view>为空，再进子路由才渲染，造成“闪一下再出来”
