javascript怎样操作浏览器历史记录？_javascript的History API如何使用？

JavaScript History API 支持无刷新操作浏览器历史，含 pushState（添加记录）、replaceState（替换记录）和 popstate 事件监听（响应前进/后退），用于 SPA 路由与状态管理，受同源策略限制。

JavaScript 通过 History API 提供了对浏览器历史记录的可控操作，比如前进、后退、添加或替换当前页的历史条目，而无需刷新页面。它主要用于单页应用（SPA）实现无跳转的路由切换和状态管理。

pushState()：添加新历史记录

在当前会话中新增一条历史记录，不触发页面刷新，URL 改变但不发起请求。

• 语法：history.pushState(state, title, url)
• state：任意可序列化的对象，随该记录保存，后续 popstate 事件中可读取
• title：目前大多数浏览器忽略此参数，可传空字符串 ""
• url：相对路径或绝对路径，必须同源，否则报错；仅改变地址栏，不加载资源

示例：
history.pushState({page: "about"}, "", "/about");
执行后地址栏变为 /about，但页面内容不变；点击浏览器“后退”会回到上一页，且触发 popstate 事件。

replaceState()：替换当前历史记录

用新状态覆盖当前历史条目，不会新增记录，适合更新 URL 或状态但不想让用户多按一次“后退”。

• 语法：history.replaceState(state, title, url)
• 参数含义与 pushState 相同
• 常用于修正初始 URL、隐藏敏感参数、或 SPA 初始化时同步路由状态

示例：
history.replaceState({loaded: true}, "", "/home?ref=internal");
地址栏更新，但历史栈长度不变。

监听 popstate 事件：响应浏览器前进/后退

当用户点击前进/后退按钮，或调用 history.back()/history.forward() 时触发，用于同步 UI 状态。

标签： javascript java go 浏览器 栈 路由 win 跨域