Navigation API 是 JavaScript 原生 API，非 HTML 标签，需通过 navigator.navigation 调用；仅 Chrome 102+/Edge 102+ 原生支持，须运行时检测 'navigation' in navigator && 'addEventListener' in navigator.navigation，否则回退 History API。
Navigation API 不是 HTML 标签，不能靠写 <nav> 或修改 href 属性启用——它必须用 JavaScript 调用 navigator.navigation 才生效，且目前仅 Chrome 102+ 和 Edge 102+ 原生支持，Firefox 和 Safari 仍不可用。
怎么判断 Navigation API 是否可用
别只查浏览器版本号，运行时检测才是关键。WebView（如微信内置浏览器、旧版 Cordova）常伪造 UA，但 navigator.navigation 为 undefined。
- 必须同时检查：
'navigation' in navigator且'addEventListener' in navigator.navigation - 若任一条件不满足，得回退到
history.pushState()+ 手动监听a标签点击 +popstate事件 -
navigator.navigation在 Safari 或 Firefox 中直接报Cannot read properties of undefined，不加防护会崩掉整个路由逻辑
为什么 navigator.navigation.addEventListener('navigate') 不触发
常见原因是导航行为没走“合法路径”：Navigation API 只捕获由浏览器发起的语义化导航，比如点击 <a href="/about">、前进/后退按钮、location.assign()，但不会响应 onclick="window.location='/about'" 或 location.href = '/about' 这类强制跳转。
- 所有内部链接必须保持原生
<a>结构，禁用内联 JS 跳转 - 动态生成的链接（如 React/Vue 的
<router-link>）需确保最终渲染为真实<a href>，而非div+click模拟 - 调用
event.intercept()后，若忘记手动调用history.pushState()或replaceState()，会导致 URL 不变、历史栈断裂
intercept() 后怎么安全更新视图和 history
event.intercept() 不会自动改 URL 或刷新 DOM，你得自己处理渲染和历史记录——这里最容易卡住导航，用户点链接后页面无反应，且无法用浏览器后退退出。
立即学习“前端免费学习笔记（深入）”；
- 必须在
intercept()回调里同步完成：数据加载 → DOM 更新 →history.pushState()（或replaceState()） - 若异步操作（如
fetch）未完成就结束 intercept，浏览器认为导航失败，可能回退到上一页或白屏 - 推荐加超时保护：
event.intercept({ handler: async () => { ... }, signal: AbortSignal.timeout(5000) })，避免无限等待 -
event.destination.url是解析好的URL实例，比手动new URL(event.url)更可靠，尤其对带 query/hash 的路径
Navigation API 和 History API 混用要注意什么
不能把两者当同一套机制混着用。Navigation API 是顶层语义层，History API 是底层栈操作工具；强行交叉使用会丢失事件上下文或触发重复渲染。
- 不要在
popstate事件里再调navigator.navigation.addEventListener('navigate', ...)—— 它们互不感知，会引发双倍处理 - 启用 Navigation API 后，
history.pushState()仍可调用，但它不会触发navigate事件（除非是用户行为间接导致） - 服务端需支持所有前端路由路径返回相同 HTML（即 SPA 的 fallback），否则刷新页面仍 404 —— Navigation API 不改变这个前提
真正难的不是写几行 addEventListener，而是拦截之后那一整套渲染链路是否原子、可控、可中断。很多项目卡在“点了没反应”，其实是 intercept() 里忘了 await 数据请求，或 DOM 更新后漏了 history 同步 —— 这些错误不会抛异常，只会让导航静默失败。
