JavaScript 通过 history API 实现 SPA 的无刷新导航：pushState/replaceState 修改历史记录并更新 URL，popstate 事件响应前进后退，需服务端 fallback 支持直接访问路由。
JavaScript 通过 history API 操作浏览器历史，让单页应用（SPA）在不刷新页面的前提下切换视图、保存状态、响应前进后退——这是 SPA 实现“类多页体验”的核心机制。
history.pushState() 和 history.replaceState() 是关键
这两个方法允许你向浏览器历史栈中添加新记录或替换当前记录，同时不触发页面跳转：
-
pushState(state, title, url)：新增一条历史记录（用户点击后退会回到上一状态） -
replaceState(state, title, url)：替换当前历史记录（不增加新条目，适合表单提交后修正 URL） - 第一个参数
state是任意可序列化的对象，会被存入历史记录，后续通过popstate事件读取 -
url必须与当前域名同源，否则报错；它会更新地址栏，但不会发起请求
popstate 事件监听导航行为
当用户点击浏览器前进/后退按钮，或调用 history.back() 等方法时，会触发 popstate 事件：
- 事件对象的
state属性就是之前传入pushState或replaceState的状态对象 - 需手动根据 state 渲染对应视图或恢复 UI 状态（比如滚动位置、表单输入）
- 注意：页面首次加载时不会触发 popstate，需在初始化时读取
history.state主动恢复
SPA 路由状态管理不是“可选”，而是必须
传统多页应用靠服务端返回完整 HTML，URL 变化天然对应新页面；而 SPA 所有内容由 JS 动态渲染，URL 改变若不被监听和响应，就会导致：
立即学习“Java免费学习笔记（深入）”；
- 用户刷新页面时，后端返回 404（因为路由是前端处理的，服务端没配置对应路径）
- 点击浏览器后退键无反应，破坏基本导航直觉
- 分享某个子页面链接时，打开后显示首页而非目标内容
- 无法保存组件内部状态（如搜索关键词、折叠面板）到历史记录中
实际开发中要配合服务端做 fallback
为支持直接访问 /user/123 这类前端路由，需确保服务端对所有非静态资源路径都返回 SPA 入口 HTML（如 index.html），再由前端路由接管解析：
- Webpack Dev Server：启用
historyApiFallback: true - Nginx：配置
try_files $uri $uri/ /index.html; - Vercel / Netlify：默认支持，或通过 _redirects 文件声明
