Navigation API 与 App History：单页导航与过渡协调

--- title: Navigation API 与 App History：单页导航与过渡协调 keywords: - Navigation API - App History - SPA 路由 - 过渡拦截 - 视图过渡 description: 介绍 Navigation API 与 App History 的事件与拦截模型、与视图过渡协作、在 SPA 中替代历史 API 的实践与兼容建议。 categories: - 文章资讯 - 编程技术 --- 概述 Navigation API 提供标准化的导航事件与拦截机制，配合 App History 可更一致地管理历史栈与入口更新。适合现代 SPA 路由实现并与视图过渡协作。 基础示例 ```js navigation.addEventListener('navigate', e => { if (e.navigationType === 'push') { e.intercept({ handler: async () => { const html = await (await fetch(e.destination.url)).text() document.getElementById('app').innerHTML = html } }) } }) document.querySelectorAll('a').forEach(a => { a.addEventListener('click', ev => { ev.preventDefault() navigation.navigate(a.href, { history: 'push' }) }) }) ``` 工程建议 - 协同过渡：与 View Transitions 配合以平滑页面切换；处理入口更新与滚动恢复。 - 兼容：不支持的浏览器回退到 History API 与手动路由；特性检测后启用。 - 观测：记录导航开始/完成时序与失败原因，优化资源加载与缓存策略。 参考与验证 - WICG Navigation API：https://github.com/WICG/navigation-api - MDN Navigation API 文档：https://developer.mozilla.org/docs/Web/API/Navigation_API - Chrome 平台文档：https://developer.chrome.com/docs/web-platform/navigation-api/