作为历史悠久的 History API 的现代化替代方案,Navigation API 已于 2026 年 1 月达到 Baseline Newly Available 状态,目前 Chrome、Edge、Firefox 147 和 Safari 26.2 等浏览器均已经支持该 API。该 API 为单页应用程序(SPA)中的客户端导航管理提供了一个集中式的专用接口,解决了困扰 Web 开发者十余年的根本性设计问题。
自推出以来,History API 一直是单页应用的主要路由机制,但它存在着一些众所周知的缺陷。它无法检测所有类型的导航触发器,无法读取完整的历史记录堆栈或编辑非当前条目,而且,其 popstate 事件的行为不一致,在通过代码调用 pushState 或 replaceState 时无法触发。正如 Chrome 开发文档所指出的那样,前 HTML 规范编写者 Ian Hickson 曾将 pushState() 称为他“最喜欢的错误”。Navigation API 是从头开始设计的,旨在完全取代 History API,而非作为增量补丁。
新 API 的核心是 navigate 事件,发生任何类型的导航操作,它都会被触发,无论是点击链接、提交表单、点击后退/前进按钮,还是通过编程调用。这取代了以往那种碎片化的做法——当时开发者必须为链接绑定点击监听器,单独处理 popstate 事件,并考虑各种边界情况。
event.intercept() 方法会自动处理 URL 更新、历史记录堆栈管理以及焦点管理等可访问性原语,从而省去了大量的冗余代码。该 API 还提供了内置的滚动恢复功能、用于取消导航的中止信号,以及用于集中错误处理的 navigateSuccess/navigateError 事件。
Jake Archibald 强调了此次发布的意义:“现在,Web 有了一种更合理、更底层的导航路由机制。”在一段视频演示中,他解释道,该 API 将导航拦截分为两部分:一个是用于在 URL 更改前执行任务的 precommitHandler(例如在旧内容仍然可见时获取数据);一个是用于在 URL 更新后切换内容的处理程序。不过他指出,Safari 的实现目前尚不支持 precommitHandler。Archibald 补充说:“希望 Safari 能尽快支持 precommitHandler。”
Wael Fadl Allah 是一名开发人员。他一直在尝试使用该 API。他认为这是“构建单页应用(SPA)的变革性技术”,并特别提到了 navigate 事件提供的统一路由控制、navigation.back()、forward()、traverseTo(key) 和 reload() 等可靠的方法,以及具备正确滚动恢复功能的内置状态持久化机制。
Navigation API 还改进了对历史记录条目的管理。开发者可以通过 navigation.entries() 查看完整的同源历史记录条目列表,使用 .getState() 访问任意条目的结构化状态,并使用 traverseTo(key) 直接跳转到特定的条目。与 History API 相比,这是一项重大改进,因为 History API 无法查看历史记录堆栈,也无法跳转到任意条目。
对于希望从 History API 迁移的开发者,GitHub 上的 WICG Navigation API 代码库中提供了一份专门的迁移指南。MDN Web Docs 还提供了全面的参考文档和示例。
值得注意的是,虽然 React Router 、 TanStack Router 这些流行的 SPA 路由器都在公开讨论将 Navigation API 作为其路由逻辑的后端,但在本文撰写之时,两者都尚未推出相关的集成方案。Navigation API 的运行层级低于这些框架路由器,它提供的是平台基础组件,支持更高层次的抽象构建,而非与它们直接竞争。
原文链接:https://www.infoq.com/news/2026/05/navigation-api-browser/





