JavaScript 的 history API 通过 pushState()、replaceState() 和 popstate 事件实现无刷新路由；pushState() 添加新记录并更新 URL，replaceState() 替换当前记录，popstate 事件监听前进 / 后退，需服务端 fallback 配合。
JavaScript 提供了 history 对象来操作 浏览器 的历史记录，核心方法是 pushState()、replaceState() 和 popstate 事件。它们能实现无刷新跳转、更新 URL 而不重载页面，常用于单页应用（SPA）的 路由 管理。
用 pushState() 添加新历史记录
pushState() 会在历史 栈中新增一条记录，同时改变地址栏 URL（可选），但不会触发页面刷新。
- 语法：
history.pushState(state, title, url) -
state：一个可序列化的对象，随该记录保存，后续通过event.state获取 -
title：目前大多数浏览器忽略此参数，传空字符串""即可 -
url：新的相对路径（如"/user/123"），必须同源，否则报错
例如：history.pushState({id: 123}, "", "/profile"); 会把 /profile 加入历史栈，当前页面仍显示原内容。
用 replaceState() 替换当前历史记录
replaceState() 不新增记录，而是替换当前这一条，适合更新 URL 或 state 但不想让用户多按一次“后退”。
立即学习“Java 免费学习笔记（深入）”；
- 语法与
pushState相同：history.replaceState(state, "", "/settings") - 常见用途：表单提交 后修正 URL、动态更新搜索参数（如
?q=js&page=2）
监听 popstate 事件响应浏览器前进 / 后退
用户点击“后退”或“前进”按钮时，若目标历史记录由 pushState 或 replaceState 创建，就会触发 popstate 事件。
- 绑定方式：
window.addEventListener("popstate", (e) => {console.log(e.state); }) -
e.state就是当初传入pushState或replaceState的 state 对象 - 注意：直接访问新 URL（如手动输入并回车）或页面首次加载时，不会 触发
popstate
补充说明和注意事项
history API 操作的是当前 tab 的会话历史，不影响其他标签页；所有操作都受同源策略限制。
- 不能删除或清空历史记录，也不能跳转到非同源 URL
-
history.go(n)、history.back()、history.forward()仍可用，但它们会触发完整页面导航（除非配合 SPA 自行拦截） - 服务端需配置 fallback：当用户直接访问
/user/123时，应返回主 HTML 文件，由 前端 路由接管渲染
基本上就这些。不复杂但容易忽略 state 的持久性和服务端配合，实际项目中建议封装成路由模块统一管理。
以上就是如何用 Javascript 操作
