history.pushState()新增历史记录，replaceState()替换当前记录；路由跳转用pushState()，修正URL用replaceState()；popstate需手动监听并初始化，避免重复绑定，history.state不随刷新保留。
history.pushState() 和 history.replaceState() 的区别与适用场景
两者都用于修改浏览器地址栏而不刷新页面，但 pushState() 会在历史栈中新增一条记录，用户点击「后退」会回到上一个状态；replaceState() 则直接替换当前历史记录，不会增加新条目。
常见错误是误用 pushState() 导致历史栈膨胀，比如在搜索框实时更新 URL 时频繁调用，用户连续按多次后退才能退出页面。
-
路由跳转（如从 /home → /user/123）用
pushState() - 修正 URL（如去掉 hash、补全 query 参数）用
replaceState() - 两个方法第一个参数都是 state 对象，必须是可序列化的（不能含函数或 DOM 节点）
- 第二个参数（title）在多数浏览器中被忽略，传空字符串
""即可 - 第三个参数是目标 URL，必须同源，否则抛出
SecurityError
监听 popstate 事件实现前进/后退响应
popstate 是唯一能捕获浏览器前进/后退动作的事件，但它**不会**在 pushState() 或 replaceState() 调用时触发，只响应用户主动操作或 history.back() 等导航行为。
容易忽略的关键点：首次加载页面时，即使 URL 已带路径，也不会自动触发 popstate。你需要手动解析当前 URL 并初始化视图。
立即学习“Java免费学习笔记（深入）”；
window.addEventListener('popstate', (event) => {
const { state } = event;
if (state && state.page) {
renderPage(state.page); // 比如渲染对应组件
}
});
// 页面加载后立即处理当前 URL
renderPage(getPageFromUrl(window.location.pathname));
如何避免重复绑定 popstate 或内存泄漏
单页应用中，如果组件反复挂载/卸载（比如 React 中 useEffect 里加监听），不清理会导致多个相同监听器累积，一次后退触发多次渲染。
必须确保每次添加监听前先移除旧的，或使用唯一标识控制生命周期。
- 用变量缓存 handler 函数引用，以便精确移除：
const handlePop = () => {...}; window.addEventListener('popstate', handlePop); window.removeEventListener('popstate', handlePop); - 不要在每次路由变化时都
addEventListener，监听应全局只注册一次 - SPA 框架（如 Vue Router、React Router）内部已处理这些细节，手写简易路由时才需格外注意
history.state 在页面刷新后是否可用
不可用。history.state 只在通过 pushState() 或 replaceState() 设置后、且未被后续导航覆盖时存在；页面硬刷新后，该值丢失，只能靠解析 window.location 恢复状态。
这意味着你不能依赖 history.state 存储关键数据（如表单草稿、滚动位置），它只是临时上下文。持久化需配合 localStorage 或 URL 参数。
- 推荐把必要状态编码进 URL（如
/user?id=123&tab=posts），保证可 bookmark 和分享 -
history.state适合存轻量、瞬态数据（如动画方向、过渡类型） - 服务端渲染（SSR）场景下，首次加载必须从 URL 提取信息，不能等
popstate
