Navigation API 是浏览器为 SPA 设计的语义化导航系统，可监听、拦截、重写导航行为；而 History API 仅修改 URL 和历史栈，无法拦截 a 标签跳转或监听 pushState，且不触发页面级导航事件。
Navigation API 不是 HTML 标签，不能用 <nav> 或任何 HTML 元素“写出来”——它是 JavaScript 原生 API，必须通过 JS 调用才能生效。
Navigation API 是什么，和 History API 有什么区别
它不是对 URL 的简单改写，而是浏览器为 SPA（单页应用）设计的**语义化导航系统**：能监听、拦截、重写、取消导航行为，并提供结构化的 navigation event 对象。History API（pushState/replaceState）只改地址栏和历史栈，不触发页面级导航事件，也无法阻止用户点击链接跳转。
常见错误现象：history.pushState 后，后退按钮能用，但 popstate 事件里拿不到目标 URL 的完整信息；刷新页面时路由丢失；无法统一拦截所有导航入口（比如 a 标签点击、前进/后退、location.assign）。
Navigation API 的核心能力包括：
立即学习“前端免费学习笔记（深入）”；
-
navigator.navigation.addEventListener('navigate', handler)可捕获所有合法导航行为（含用户操作和 JS 调用） -
event.intercept()允许你阻断默认跳转，自己渲染内容 -
event.destination.url提供标准化的目标 URL 解析结果（不用再手动new URL(event.url)） - 原生支持
scrollRestoration: 'manual'和userActivation: true等细粒度控制
怎么启用 Navigation API（兼容性与检测）
目前仅 Chrome 102+、Edge 102+ 原生支持，Firefox 和 Safari 尚未实现。不能直接用，必须先检测：
if ('navigation' in navigator && 'addEventListener' in navigator.navigation) { // 使用 Navigation API} else { // 回退到 History API + 手动监听 a 标签 click}
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
注意：navigator.navigation 在某些 WebView（如旧版 Cordova、微信内置浏览器）中可能为 undefined，即使 UA 字符串含 Chrome。真实环境务必运行时判断，别只看文档写的“Chrome 102+”。
性能影响：启用监听本身无开销，但 event.intercept() 后需自行处理 DOM 渲染和 history 更新，若逻辑卡顿会导致导航“假死”——用户点链接后页面没反应，且无法用浏览器原生后退退出。
如何用 Navigation API 实现基础路由跳转
关键不是“怎么跳”，而是“怎么让跳转不刷新页面并保持 history 正确”：
- 所有内部链接必须用
<a href="/about">关于</a>，不要用onclick="goTo('/about')"—— 否则 Navigation API 的navigate事件根本不会触发 - 在
navigate监听器里调event.intercept()，然后手动加载对应模块或切换组件 - 必须显式调用
navigation.navigate(url, {history: 'push'})来更新地址栏和历史栈（否则用户刷新会 404） -
event.canIntercept为false时（如跨域跳转、下载链接、target="_blank"），不能调intercept()，需放行
示例片段：
navigator.navigation.addEventListener('navigate', (event) => {
if (!event.canIntercept) return;
event.intercept({
async handler() {
const url = new URL(event.destination.url);
// 这里加载 /about 对应的组件或 HTML 片段
await renderPage(url.pathname);
// 主动推进 history，确保后退可用
navigation.navigate(event.destination.url, { history: 'push' });
}
});
});
为什么你的 Navigation API 不生效
最常踩的坑不是代码写错，而是环境或使用方式不对：
- 在本地
file://协议下直接双击 HTML 打开 —— Navigation API 要求 HTTPS 或localhost，file://下完全禁用 - 页面已存在多个
navigator.navigation.addEventListener('navigate', ...)，但没清理旧监听，导致重复拦截或冲突 - 用了
<a href="page2.html">但没配服务器支持 SPA 的 fallback（比如 Nginx 没设try_files $uri $uri/ /index.html;），刷新时 404，误以为 API 失效 - 在 iframe 里使用，而父页面没开启
allow="navigation"`权限（Chrome 125+ 加了这个限制）
复杂点在于：它和传统路由库（如 React Router、Vue Router）不是替代关系，而是底层支撑。如果你用框架，大概率不需要直接操作 Navigation API —— 框架已在内部封装并降级。真要手写 SPA 路由，得同时处理 history、scroll、focus、preload、loading 状态，远不止“改个 URL”那么简单。
