单页应用后退按钮“不生效”是因为未调用history.pushState()更新浏览器历史栈。SPA切换视图时必须同步调用pushState()，拦截a标签默认行为并手动更新DOM和历史记录；replaceState()用于覆盖当前记录，如清除临时参数或提交后修正URL；popstate需处理初始加载state为null的情况，并统一视图加载逻辑。
为什么单页应用里后退按钮经常“不生效”
不是按钮没绑事件，而是浏览器历史栈里根本没存你期望的记录。SPA 页面切换时若只改 DOM 不调 history.pushState()，history.back() 就只能回到上一个完整页面（比如首页），中间所有“伪跳转”全被跳过。
必须在每次视图切换时调用 pushState()
点击导航链接、路由跳转、甚至 Tab 切换，只要内容变了，就得同步更新历史记录。否则用户点后退，页面状态和 URL 严重错位。
- 用
preventDefault()拦截<a>默认跳转，再手动加载内容 + 调history.pushState({path: '/user'}, '', '/user') -
state参数别传空对象 —— 至少带个path或view字段，后续popstate里靠它还原视图 - URL 必须同源，不能是
https://other.com/page，否则直接抛SecurityError
replaceState() 该用在哪几个地方
它不新增记录，只覆盖当前项，适合修正“不该进历史栈”的操作，比如：
- 表单提交成功后把
/form?step=3替换成/success，避免用户后退又回到未提交状态 - URL 中携带临时参数（如
?utm_source=xxx），渲染完主内容后立刻history.replaceState()去掉，防止分享链接带脏参 - 初始页面加载时，若 URL 是
/#home这种 hash 形式，可用replaceState()抹掉 hash，转成干净的/home
监听 popstate 时最容易漏掉的两件事
这个事件只在用户点浏览器前进/后退按钮，或调 history.back() 时触发，但默认不会包含初始页面的状态。
立即学习“前端免费学习笔记（深入）”；
- 首次加载页面时
event.state为null，得 fallback 到window.location.pathname解析当前视图 - 如果用了
replaceState()替换过当前记录，而后续又没再pushState()，那往前点几次后退就可能直接跳出 SPA 路由范围，回到上一个真实页面
真正健壮的做法是：所有视图加载逻辑统一走一个函数，不管来自点击、popstate 还是刷新，都靠它驱动；state 字段只是辅助，主逻辑始终以 URL 为准。
