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

先说几个核心判断：Firefox 中 Vue Router 跳转后 URL 变了但页面空白，而 Chrome 正常——这种“浏览器专属”的 bug，大概率不是代码逻辑层面的硬伤，而是 Firefox 对某些渲染边界条件的处理更严苛。下面从几个具体方向来排查，基本能覆盖已知的触发场景。

确认 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。