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虽强大，但有几点必须留意：
pushState()和replaceState()不会触发hashchange事件，也不影响location.hash
SecurityError
不复杂但容易忽略。
以上就是JavaScript如何操作浏览器历史_使用History API改变URL而不刷新页面？的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
768
收藏
取消收藏
