JavaScript如何操作浏览器历史_使用History API改变URL而不刷新页面？

JavaScript通过pushState()和replaceState()实现无刷新URL变更，配合popstate事件监听前进/后退；前者新增历史记录，后者替换当前记录，均需同源且state用于保存页面状态。

JavaScript可以通过History API实现不刷新页面的URL变更，核心方法是pushState()和replaceState()，配合popstate事件监听浏览器前进/后退行为。

用pushState()添加新历史记录

该方法向浏览器历史栈中插入一条新记录，同时更新地址栏URL，但不会触发页面加载或跳转。

• 语法：history.pushState(state, title, url)
• state：任意可序列化的对象，会在popstate事件中作为event.state返回，常用于保存页面状态（如分页页码、筛选条件）
• title：目前大多数浏览器忽略此参数，可传空字符串""
• url：相对路径或绝对路径，必须同源（协议+域名+端口一致），否则会报错

示例：history.pushState({page: 2}, "", "/search?page=2") —— URL变为/search?page=2，历史栈新增一项。

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

与pushState()类似，但不新增记录，而是直接修改当前历史项。适合在初始化页面时修正URL（比如从/#id改成/item/id），或提交表单后更新URL而不留“返回到提交前”的冗余入口。

立即学习“Java免费学习笔记（深入）”；

• 语法：history.replaceState(state, title, url)
• 同样要求同源，state和url含义与pushState()一致

示例：history.replaceState({id: 101}, "", "/product/101") —— 当前URL更新，历史长度不变。

标签： javascript java 前端 浏览器 端口 栈 路由 win 跨域 常见问题