根本原因是浏览器历史栈中缺乏带有效state的历史项；首次加载时history.state为null，旧版Safari会忽略pushState(null或空对象)操作，导致后续返回不触发popstate，须在DOM就绪后立即用replaceState注入初始state。
为什么 window.addEventListener('popstate', ...) 没反应
根本原因不是监听代码写错了，而是浏览器历史栈里压根没有可回溯的、带有效 state 的条目。首次加载页面时 history.state 为 null，而旧版 Safari 会直接忽略 pushState(null, '', '/x') 或 pushState({}, '', '/x') 这类空状态，导致后续点返回按钮不触发事件。
必须在 DOM 加载后、任何路由逻辑前执行垫底操作：
if(history.state === null) { history.replaceState({ init: true }, '', location.href); }- 一定要用
replaceState，不是pushState：避免多出一个空白历史项，用户第一次点返回就跳到不可见页 - 别把这段代码塞在某个组件钩子里——得早于所有导航行为执行，否则用户手快点返回就漏掉了
- 移动端 WebView（微信、支付宝）对此极其敏感，漏掉这步大概率白屏或跳错
pushState 调用时 URL 和 state 怎么填
pushState 的第三个参数（URL）必须是同源相对路径，比如 /user/123、/search?q=js，不能是 https://example.com/user/123 或跨域地址，否则直接抛 SecurityError。
第一个参数 state 建议只放轻量标识，例如：
立即学习“前端免费学习笔记（深入）”；
-
{ page: 'detail', id: 456 }—— 足够还原视图，又不会超浏览器 640KB 左右的单条state大小限制 - 不要存
DOM节点、函数、大型数组或未序列化的对象，JSON.stringify 会失败 - 第二个参数
title目前所有主流浏览器都忽略，填空字符串''即可
popstate 回调里怎么更新视图
popstate 只通知“历史变了”，不负责渲染。你得自己从 event.state 取数据，并同步到 UI：
- 先检查
event.state是否存在，再结合location.pathname或location.search做精确匹配 - 不要在回调里再调用
pushState：极易引发循环（比如弹窗后推一个 state，用户再按返回又触发） - 首次加载页面时
popstate不触发，需手动读取当前location并初始化一次视图 - 若用异步拉取数据（如加载文章详情），应在视图更新前加 loading 状态，避免白屏或残留旧内容
服务端 fallback 必须配，否则刷新就 404
前端路由只对 SPA 内部有效。用户直接访问 https://site.com/dashboard 时，浏览器会向服务端发真实请求。如果服务端没配置兜底规则，就会返回 404。
常见配置方式：
- Nginx：
try_files $uri $uri/ /index.html; - Express：
app.get('*', (req, res) => res.sendFile(path.join(__dirname, 'index.html'))); - 静态托管（GitHub Pages、Vercel）需额外设置重定向规则，不能只靠前端
这个环节和前端代码无关，但漏配会导致整个路由机制在刷新或外链直达时彻底失效——最容易被忽略，也最常在线上环境暴露。
