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 路由实现并与视图过渡协作。

基础示例

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/