history.pushState仅修改URL和历史栈，不触发页面更新，需手动监听popstate事件并调用渲染函数；首次加载需显式渲染；服务端须配置Nginx fallback返回index.html。
history.pushState 为什么不能直接触发页面更新
调用 history.pushState 只会修改 URL 和浏览器历史栈，不会自动加载新内容或执行路由匹配逻辑。这是单页应用中“路由不生效”的最常见误解。
你需要手动监听 popstate 事件，并在其中解析当前路径、决定渲染哪个组件或视图：
window.addEventListener('popstate', (event) => {
const path = window.location.pathname;
renderViewForPath(path); // 你自己实现的渲染函数
});- 注意：首次进入页面时（即初始加载）
popstate不会触发，必须显式调用一次renderViewForPath -
pushState的第三个参数（URL）必须是同源的，否则抛出安全错误SecurityError - 服务端需配置 fallback：所有前端路由都返回
index.html，否则刷新页面会 404
hash 路由比 history 路由更简单但有局限
location.hash 变化会触发 hashchange 事件，且不向服务端发请求，适合快速原型或静态托管环境（如 GitHub Pages）。
但它带来的 URL 看起来像 https://site.com/#/user/123，对 SEO 和用户体验都不友好。
立即学习“Java免费学习笔记（深入）”；
- 监听方式：
window.addEventListener('hashchange', handler) - 读取路径：
location.hash.slice(1)（去掉开头的#） - 不能用
pushState操作 hash，只能用location.hash = '...' - 部分老版本 IE 对
hashchange支持不稳定，需降级轮询location.hash
如何避免重复绑定 popstate 或 hashchange
在 SPA 中频繁切换路由（比如组件销毁又重建）时，若没清理事件监听器，会导致同一回调被多次执行，引发视图错乱或内存泄漏。
- 每次绑定前先用
removeEventListener清理旧监听器，或使用唯一函数引用 - 推荐封装成可取消的监听函数：
const unlisten = listenToRouteChange((path) => { /* ... */ });内部用闭包保存 handler 引用以便移除 - React/Vue 等框架中，在组件卸载（
useEffect cleanup/beforeUnmount）时务必调用removeEventListener
服务端 Nginx 配置 fallback 是上线必做项
开发时本地服务器（如 Vite、Webpack Dev Server）默认做了 history fallback，但生产环境 Nginx 不会自动处理。
若不配置，用户直接访问 /dashboard 会返回 404，因为 Nginx 尝试找 dashboard 这个文件或目录。
- 关键配置：
location / { try_files $uri $uri/ /index.html; } - 不要写成
rewrite ^(.*)$ /index.html last;—— 它会丢失 query 参数和 hash - 如果用了子路径部署（如
/app/），try_files中的/index.html需改为/app/index.html
实际路由逻辑越简单越好，复杂匹配、嵌套路由、权限跳转这些，最好交给成熟库（如 react-router 或 vue-router）处理。手写容易漏掉边界情况，比如 URL 编码、空格、斜杠结尾、base 标签影响等。
