如何用Javascript操作浏览器历史记录？

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免费学习笔记（深入）”；

标签： javascript java html js 前端 go 浏览器 栈 路由 win 表单提交