为什么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 组件文件，定位 标签内部第一行
方法二：如果首行是 这类独立注释，立即将其剪切并粘贴到最外层 div 内部第一行
方法三：保存后在 Firefox 中点击跳转，观察是否恢复

Vue3 编译器在 Firefox 下对根级注释的 AST 构建更严格，【只要 下第一个直接子节点是注释，Firefox 就可能跳过后续元素挂载】，这是已复现的跨浏览器差异行为。

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

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

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