为什么Vue单页项目在火狐浏览器中Router路由跳转会显示空白

Firefox中Vue Router跳转后URL变化但页面空白，主因是其对根级注释、未捕获Promise错误、Shadow DOM slot分发及History API延迟更敏感，需针对性排查注释位置、错误处理、scrollBehavior配置及网络预测功能。

确认 Firefox 特定行为是否触发了 Vue Router 的渲染边界条件

Vue 单页项目在 Firefox 中点击 router-link 后 URL 变化但页面空白，而 Chrome 正常，说明问题与浏览器解析 DOM 或事件循环的细微差异有关，不是通用逻辑错误。

首先打开 Firefox 开发者工具（Ctrl+Shift+I），切换到「控制台」标签页，刷新页面并执行一次跳转，观察是否有 【未捕获的 Promise 拒绝】 或 silent fail 类型警告——Firefox 对未处理的异步错误更敏感，尤其在组件 setup() 中抛出未 catch 的 Promise 错误时，会静默终止挂载流程。

检查 router-view 是否被 Firefox 的 Shadow DOM 模式意外隔离

若项目中使用了 Web Components、自定义元素或第三方 UI 库（如某些版本的 Element Plus 或 Naive UI），且启用了 shadow: true 选项，Firefox 对 的 slot 分发支持不如 Chrome 稳定。

在父组件模板中定位 标签，确认其外层容器没有启用 Shadow DOM：【禁止在包含 的组件上设置 createApp(...).mount() 时传入 { shadowRoot: true }】。

临时移除所有 attachShadow 调用或自定义元素封装，用纯 div 替代后重试跳转。

验证 Firefox 下 Vue Router 的 history 模式回退栈同步问题

Firefox 在某些版本中对 History API 的 pushState 和 replaceState 调用后，window.location 的更新存在微小延迟，导致 Vue Router 内部状态判断失准。

步骤一：在路由配置中显式添加 scrollBehavior 并强制返回对象
步骤二：在 router/index.js 中将 scrollBehavior 改为：
scrollBehavior: () => ({ left: 0, top: 0 })
步骤三：重启开发服务器，清除 Firefox 缓存（Ctrl+Shift+R 强制重载）后测试跳转

这能绕过 Firefox 对滚动位置读取失败引发的渲染中断链路。

排查 Firefox 对注释节点的模板解析异常

方法一：打开出问题的 .vue 组件文件，定位

Vue3 编译器在 Firefox 下对根级注释的 AST 构建更严格，【只要 ，这是已复现的跨浏览器差异行为。

禁用 Firefox 的预测网络请求功能进行验证

地址栏输入 about:config → 搜索 network.predictor.enabled → 双击设为 false
关闭所有标签页，重新打开项目地址，执行 router-link 跳转

该设置会影响 Firefox 对动态 import() 的预加载判定，部分 Vite + Vue3 项目在启用此功能时，会导致异步组件加载 Promise 被提前 reject。