写点什么

Navigation API 达基线版本,已经可以作为 History API 的替代方案使用

作者:Daniel Curtis
  • 2026-05-21
    北京
  • 本文字数:1336 字

    阅读完需:约 4 分钟

作为历史悠久的 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 RouterTanStack Router 这些流行的 SPA 路由器都在公开讨论将 Navigation API 作为其路由逻辑的后端,但在本文撰写之时,两者都尚未推出相关的集成方案。Navigation API 的运行层级低于这些框架路由器,它提供的是平台基础组件,支持更高层次的抽象构建,而非与它们直接竞争。

原文链接:https://www.infoq.com/news/2026/05/navigation-api-browser/