App History API：导航监听与路由管理

## 概述 App History 与 Navigation API 为应用提供统一的导航事件流与状态管理。通过 `navigation.addEventListener('navigate', ...)` 监听导航，并用 `e.intercept()` 拦截以实现 SPA 内部路由与过渡。 ## 用法/示例 ```js navigation.addEventListener('navigate', e => { const url = new URL(e.destination.url) if (url.origin === location.origin) { e.intercept({ handler: async () => { const page = await fetch(url.pathname).then(r => r.text()) document.getElementById('root').innerHTML = page } }) } }) ``` ```js // 读取当前与历史项 console.log(appHistory.current, appHistory.entries()) ``` ## 工程建议 - 对跨源导航直接放行，避免破坏浏览器默认行为与安全边界。 - 与 View Transitions 协作实现跨页面共享元素过渡，提高连续性。 - 记录导航事件用于性能与稳定性度量，确保异常导航可恢复。 ## 参考与验证 - web.dev：Navigation API — https://web.dev/articles/navigation-api - web.dev：App History API — https://web.dev/articles/app-history-api - MDN：Navigation API — https://developer.mozilla.org/docs/Web/API/Navigation_API