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更新，历史长度不变。
监听用户导航：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节点等无法保存）
不复杂但容易忽略。
