popstate 不触发是因为它仅响应 history.pushState()/replaceState() 引起的 history stack 变更，而 location.hash 变化属于浏览器原生锚点行为，不修改历史栈；监听 hash 必须用 hashchange 事件。
为什么 window.location.hash 变化不会触发 popstate
因为 popstate 只响应 history.pushState() 和 replaceState() 引起的 URL 状态变更，而 hash 变更属于浏览器原生锚点跳转行为，它不修改 history stack，也不触发该事件。想监听 hash 变化，必须用 hashchange —— 这是唯一标准且兼容性良好的机制。
如何正确绑定和响应 hashchange 事件
直接在全局监听即可，无需依赖路由库或封装复杂逻辑。注意两点：一是事件对象里 event.oldURL 和 event.newURL 并非所有浏览器都支持（尤其旧版 IE），稳妥做法是每次从 window.location.hash 读取最新值；二是首次加载时不会触发该事件，需手动执行一次路由匹配。
- 用
window.addEventListener('hashchange', handler)绑定，别用onhashchange属性（不利于解绑） - handler 内部用
location.hash.slice(1)获取干净的路由路径，比如#user/123→user/123 - 首次进入页面时调用一次 handler，避免白屏或状态未初始化
function onHashChange() {
const path = location.hash.slice(1) || 'home';
renderView(path);
}
window.addEventListener('hashchange', onHashChange);
onHashChange(); // 首次加载补一手
怎么让链接点击不刷新页面又能更新 hash
普通 标签点击会触发 hash 变更并滚动到对应 id 元素——如果页面没有 id="about"，就只是改 hash 不滚动，这刚好符合前端路由需求。但要注意几个干扰点：
- 确保链接
href以#开头，且后面不带协议或域名，否则会整页跳转 - 避免给链接加
onclick="location.hash='...'"，这样会丢失浏览器前进/后退能力 - 如果用了
preventDefault()或return false，反而会阻断 hash 更新，导致监听失效 - 服务端不需要任何配置，所有 hash 路由都由前端接管，
404问题天然不存在
hash 路由的边界和坑点
它适合轻量单页应用或文档型站点，但有明确限制：不能用于需要 SEO 的场景（搜索引擎基本不索引 hash 后内容），也不适用于需要服务端渲染或权限校验的路由（因为 hash 永远不会发到服务端）。另外，location.hash 是 URL 的一部分，但它的编码规则和 query string 不同——空格会被转成 %20，而中文等字符默认不自动 encode，建议手动用 encodeURIComponent() 处理动态段。
最常被忽略的是：当用户手动在地址栏编辑 hash 并回车时，hashchange 仍会触发，但此时页面不会重新加载，所以你的视图更新逻辑必须完全可重入、无副作用。比如不要在路由 handler 里重复初始化全局状态或重复绑定事件。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
