navigation api 不能替代 vue router 的导航守卫，因其 beforenavigate 事件禁止调用 preventdefault()、无法阻断或重定向导航，仅提供可观测性；它在浏览器已完成预加载后触发，不支持同步权限校验与登录跳转，仅适合作为信号增强层配合路由库使用。
Navigation API 不能拦截或阻止导航，beforenavigate 和 navigate 事件都禁止调用 event.preventDefault()；它只提供观察能力，不是控制接口。想实现路由守卫（如登录校验、离开确认），必须继续用 Vue Router 或 React Router 的守卫机制，Navigation API 只能作为信号增强层配合使用。
为什么 beforenavigate 无法替代 router.beforeEach
规范明确禁止在 beforenavigate 中阻断、重定向或修改目标 URL。事件触发时，浏览器已完成 DNS 查询、TLS 连接甚至资源预加载，event.destination.url 只读，你无法 abort，也不能同步校验权限。
-
location.href尚未变更，但用户点击后退/前进的意图已不可逆 - 权限判断（如登录态）必须在导航发生前完成，而
beforenavigate是异步事件，无法保证执行早于 DOM 更新 - 没有等价于
next('/login')的 API；强行跳转需手动调用location.assign()，这会额外插入一条 history 记录，导致后退栈错乱
navigate 事件适合做什么，不适合做什么
navigate 在 DOM 更新完成后触发，适合“事后归因”和体验增强，而非流程控制。
- 记录用户来源页、导航类型（
event.navigationType可区分push/replace/back/forward） - 结合
document.visibilityState === 'visible'打点真实首屏渲染时间，比DOMContentLoaded更贴近用户感知 - SPA 切换后恢复滚动位置——注意：必须等
navigate回调执行完毕再调用window.scrollTo()，否则可能被浏览器滚动恢复逻辑覆盖 - 不能用于弹“确认离开”对话框：此时 URL 已变，页面已更新，再弹窗就晚了
如何安全检测并回退到 History API
别依赖 UA 字符串判断浏览器版本，WebView 常伪造 UA。运行时检测才是关键：
- 必须同时满足：
'navigation' in navigator且'addEventListener' in navigator.navigation - 任一条件不满足，就得回退到
history.pushState()+ 手动监听a标签点击 +popstate事件 -
navigator.navigation在 Safari 或 Firefox 中直接为undefined，不加防护会抛Cannot read properties of undefined致整个路由逻辑崩掉
intercept() 的常见误用与正确链路
intercept() 仅阻断跳转，不自动更新 URL 或 DOM；它要求你同步完成数据加载 → DOM 更新 → history.pushState()，否则用户点击无响应或白屏。
- 错误做法：在
intercept回调里await fetch()后再操作 DOM —— 浏览器不会等，快照拍的是旧状态，View Transition 会报InvalidStateError - 正确链路：先取数据（在
intercept外或顶部await），再提前挂载新容器（document.body.appendChild(newArticle)），最后在startViewTransition回调中同步替换 DOM - 必须加超时保护：
event.intercept({ handler: async () => { ... }, signal: AbortSignal.timeout(5000) })，避免无限等待
真正关键的不是“怎么拦截”，而是“在哪一环介入最安全”——Navigation API 的设计初衷是让浏览器暴露更多导航上下文，而不是取代现有路由库的控制流。它的价值在可观测性，不在可干预性。跨 tab 同步、微前端子应用感知、登录态广播这些事，它一个都不管，该用 localStorage + storage 事件或 BroadcastChannel 还得用。
大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！
