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

---

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

keywords:

• App History
• navigation API
• e.intercept
• SPA 路由
• 历史记录

description: 使用 App History 与 Navigation API 监听与拦截导航事件，统一管理应用路由与过渡逻辑，并给出可恢复与度量建议。

categories:

• 文章资讯
• 技术教程

---

概述

App History 与 Navigation API 为应用提供统一的导航事件流与状态管理。通过 navigation.addEventListener('navigate', ...) 监听导航，并用 e.intercept() 拦截以实现 SPA 内部路由与过渡。

用法/示例

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
    } })
  }
})

// 读取当前与历史项
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