概述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-apiweb.dev:App History API — https://web.dev/articles/app-history-apiMDN:Navigation API — https://developer.mozilla.org/docs/Web/API/Navigation_API

发表评论 取消回复