核心区别在于是否新增历史记录条目：pushState() 添加新记录，replaceState() 替换当前记录；参数相同且同源限制，需注意 state 大小、popstate 兼容初始化、服务端 fallback 及视图同步。
history.pushState() 和 history.replaceState() 的区别在哪
核心区别在于是否新增历史记录条目：pushState() 会往浏览器历史栈里加一条新记录，用户点后退能回到上一个状态；replaceState() 则是替换当前记录，不增加长度，适合更新 URL 但不想让用户后退到旧状态的场景（比如表单提交后刷新页面参数）。
两个方法参数完全一致：state（任意可序列化对象）、title（目前多数浏览器忽略）、url（相对路径，必须同源）。
-
url不能跨域，否则抛出SecurityError -
title参数传空字符串或null更稳妥，避免某些旧版浏览器报错 -
state对象大小建议控制在 640KB 以内，超出可能被截断（Chrome 限制）
监听 popstate 事件时拿不到 state 数据？
常见原因是直接刷新页面或首次访问时，popstate 事件触发但 event.state 为 null——因为初始页面没通过 pushState 或 replaceState 设置过状态。
正确写法要兼容初始化状态：
立即学习“Java免费学习笔记（深入）”；
window.addEventListener('popstate', (event) => {
if (event.state) {
// 处理 state 数据，比如渲染页面
renderPage(event.state);
} else {
// 首次加载或直接访问该 URL 的情况
renderPage(defaultState);
}
});
- 不要依赖
event.state必然存在 - 页面初始化时也应主动读取
history.state，它和popstate中的state同步 -
popstate不会在pushState/replaceState调用时触发，只响应用户点击前进/后退按钮、或 JS 调用history.back()等导航行为
手动触发前进后退：history.back()、forward()、go() 怎么选
back() 和 forward() 是语义明确的快捷方式；go(n) 更灵活，n 为正数表示前进，负数表示后退，0 表示刷新当前页（但不会触发 popstate）。
-
history.go(-1)和history.back()效果相同，但前者可读性稍差 - 调用这些方法前，建议先检查
history.length（注意：该值包含所有历史记录，但无法准确反映可回退步数） - 更可靠的方式是用
history.state是否为null来判断是否处于“栈底”，但仍有局限——比如用户从外部链接跳转进来，state也是null
SPA 路由中容易漏掉的边界情况
单页应用里最常忽略的是：用户手动修改地址栏 URL 后按回车，这会触发完整页面加载，绕过 JS 路由逻辑。此时必须在服务端配置 fallback（如 Nginx 返回 index.html），同时前端在初始化时解析 window.location.pathname 并同步到路由状态。
- HTML5 History 模式下，
/user/123这样的路径需要服务端兜底，否则 404 - 使用
pushState更新 URL 后，务必同步更新视图，不能只改地址栏 - 如果页面支持滚动复位（比如回到顶部），应在
popstate回调里显式调用window.scrollTo(0, 0)，浏览器不会自动做这件事
history API 看似简单，但 state 生命周期、服务端配合、用户主动跳转这三块最容易出问题。尤其别假设 history.length 能准确反映导航能力——它在隐私模式、iframe 场景下行为不一致，实际逻辑应围绕 state 存在与否和 URL 解析来设计。
