JavaScript 操作浏览器历史使用 window.history 对象，核心方法为 back()、forward()、go()、pushState() 和 replaceState()；后两者支持无刷新路由，但受同源限制且需服务端配合 history 模式避免 404。
直接说结论：JavaScript 操作浏览器历史用的是 window.history 对象，它不让你读取用户访问过的 URL 列表（出于隐私限制），但能前进、后退、替换或添加当前会话的历史记录条目；关键方法是 back()、forward()、go()、pushState() 和 replaceState() —— 后两个才是现代单页应用（SPA）实现无刷新路由的核心。
history.back() / forward() / go() 为什么有时没反应？
这三个方法本质是操作浏览器的“历史指针”，不是跳转到某个 URL。它们依赖浏览器历史栈的实际状态：
-
back()等价于go(-1)，但如果当前已是历史栈最底端（比如新打开的标签页），调用后什么也不会发生，也不会报错 -
forward()只在用户刚点过back()或 JS 调用过go(-1)后才有效；若历史栈中没有“前方”条目，同样静默失败 -
go(n)中n是整数，go(0)相当于刷新当前页（但不触发reload，而是重新发起 GET 请求） - 这些方法受同源策略约束：跨域 iframe 内无法调用父页面的
history方法
pushState() 和 replaceState() 的参数和区别
这两个方法用于修改地址栏且不触发页面刷新，但行为有本质差异：
-
pushState(state, title, url)在历史栈**末尾新增一条记录**，用户点返回会回到上一条（即触发popstate事件） -
replaceState(state, title, url)**替换当前历史记录项**，不会增加栈长度，适合更新 URL 但不想让用户多按一次返回键 -
state是任意可序列化的对象（会被存入历史记录，之后在popstate事件中可用），不是字符串 -
title参数目前所有主流浏览器都忽略，传空字符串""即可 -
url必须与当前页面同源，否则抛出SecurityError；可以是相对路径（如"./user/123"）或绝对路径（如"/post?id=456"），但不能是跨域 URL
示例：history.pushState({id: 123}, "", "/profile"); —— 地址栏变为 /profile，历史栈加一项，state 对象可在后续 popstate 中拿到。
立即学习“Java免费学习笔记（深入）”；
监听 popstate 事件时容易漏掉的关键点
popstate 事件只在用户点击浏览器前进/后退按钮、或调用 back()/forward()/go() 时触发，**不会**因 pushState() 或 replaceState() 触发：
- 必须用
window.addEventListener("popstate", handler)，而不是onpopstate = handler（后者不被推荐，且可能被覆盖） - 事件对象
event.state就是之前传入pushState()或replaceState()的state参数；如果是通过浏览器原生导航进入的页面（非 JS 驱动），event.state为null - 首次加载页面时不会触发
popstate，哪怕 URL 包含 hash 或 search；如果需要初始化路由状态，得手动解析location.pathname或location.search - 注意：Safari 在某些版本中，页面首次加载带 hash 时会错误触发一次
popstate，需在 handler 中判断event.state === null并忽略
真正难的不是调用这几个方法，而是把 state 管理、URL 解析、视图更新、服务端 fallback 这几件事串成闭环 —— 尤其是服务端没配好 history 模式时，用户直接访问 /dashboard 会 404，这个坑比 JS 本身深得多。
