popstate用于监听history api导航（前进/后退、back/forward/go），仅当url由pushstate/replacestate写入时才触发且携带state；hashchange专监location.hash变化，兼容性好，但不响应query参数变更。
直接用 popstate 和 hashchange 就能监听 URL 变化，但必须分清场景：改的是整个路径（含 /）还是只动了 # 后面的部分。混用或漏判会导致事件不触发、状态丢失、历史栈错乱。
什么时候该用 popstate？
popstate 只响应浏览器前进/后退按钮、history.back()、history.forward()、history.go() 这类“导航式”跳转，且前提是目标 URL 是由 history.pushState() 或 history.replaceState() 写入的。
- 如果你用
pushState管理单页路由（比如从/list切到/detail/123），就必须靠popstate捕获返回动作 -
popstate事件对象的event.state是关键——它不是当前 URL 的解析结果，而是你当初传给pushState的那个对象的拷贝 - 注意：
location.href = 'xxx'或直接修改location.hash不会触发popstate；只有历史栈条目切换才触发 - 首次进入页面时，如果 URL 是服务端直出的（非 JS 跳转），
popstate不会自动触发，需手动读取history.state并初始化视图
什么时候该用 hashchange？
hashchange 专盯 location.hash 变动，哪怕只是 #section1 → #section2 这种锚点跳转，也立刻响应，且兼容性好（IE8+）。
- 适合做页面内锚点导航、Tab 切换、轻量级路由（如老项目没上 History API）
- 不能依赖
event.newURL或event.oldURL—— Firefox 不支持这两个属性，只认location.hash - 检测前务必用
'onhashchange' in window判断支持性；若要兼容 IE7/IE8 兼容模式，还得加document.documentMode === 8限定 - 手动改
location.hash会触发事件，但location.href = '#xxx'在某些旧版 Safari 下可能不触发，统一用location.hash = 'xxx'
为什么两个事件都不能监听 query 参数变化？
popstate 和 hashchange 都不关心 ? 后面的 query 字符串。URL 从 /page?a=1 变成 /page?a=2，两者都无感。
- 这不是设计缺陷，而是规范使然：query 变化本身不产生新历史记录，也不改变 hash，浏览器不会为此触发导航事件
- 真要监听 query，得自己封装逻辑：用
URLSearchParams解析location.search，再对比前后值；或者监听popstate后顺带检查location.search - 注意
replaceState改 URL 时若只动 query，不会触发popstate；必须确保 state 对象不同，或显式调用pushState - 别用
setInterval轮询location.search——性能差、不准，且和现代路由库（如 React Router v6）的useSearchParams冲突
容易被忽略的边界问题
真实项目里，最常栽在「事件没绑定上」或「state 为空」这种低级但难复现的问题上。
-
popstate监听必须在页面加载完成前注册，否则首次后退可能错过；不要等DOMContentLoaded太久才加 -
history.state在非 push/replace 进来的页面里是null，别直接解构event.state?.xxx，先判空 - SPA 中嵌套 iframe 时，父页面的
popstate不会响应 iframe 内部的 URL 变化；iframe 需自己监听并 postMessage 通知父级 - Vue Router / React Router 已封装好这些逻辑，但如果你手写路由，
replaceState后记得同步更新内存中的当前路由状态，否则popstate回退时拿不到正确数据
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
