17370845950

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而不留“返回到提交前”的冗余入口。

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

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

监听用户导航：popstate事件

当用户点击浏览器前进/后退按钮，或调用history.back()等方法时，会触发popstate事件。需主动绑定监听，恢复对应状态。

• 监听写法：window.addEventListener("popstate", (e) => { console.log(e.state); })
• e.state即当时传入pushState()或replaceState()的state对象
• 注意：页面首次加载时不会触发popstate，需单独处理初始URL解析

建议在监听回调中结合location.pathname和e.state重新渲染内容，实现真正的单页应用体验。

注意事项与常见问题

History API虽强大，但有几点必须留意：

• URL变更后，若用户刷新页面，服务端必须能响应这个新URL（如配置前端路由的fallback），否则404
• pushState()和replaceState()不会触发hashchange事件，也不影响location.hash
• 不能跨域操作，尝试设置不同源的URL会抛出SecurityError
• state对象大小有限制（通常几MB），且只支持可序列化数据（函数、DOM节点等无法保存）

不复杂但容易忽略。