使用 history.pushstate 实现 spa 路径映射，需前端拦截链接点击调用 pushstate 更新 url 和历史栈、监听 popstate 响应浏览器导航，并配置服务端将所有非资源请求回退至 index.html。
使用 history.pushState 实现 SPA 的原始路径映射，核心在于让前端路由与 URL 路径保持同步，同时避免真实页面跳转，并确保后端能正确返回单页入口（如 index.html）以支持直接访问或刷新。
理解 pushState 与浏览器历史栈的关系
history.pushState(state, title, url) 不会触发页面加载，仅修改地址栏 URL、向历史栈添加新记录，并可携带一个可序列化的 state 对象。URL 必须是同源的，且不能跨域或改变协议/主机名。
- state 参数可用于存储路由相关数据（如当前视图、查询参数），后续通过
popstate事件读取 - title 参数目前多数浏览器忽略，可传空字符串
- url 是关键：它决定地址栏显示路径，也应与你期望的“语义化路由”一致（如
/user/123、/posts?sort=desc）
手动绑定链接点击并拦截导航
为实现无刷新跳转，需捕获用户点击的 <a></a> 标签，阻止默认行为，再调用 pushState 并更新视图。
- 给所有内部链接添加统一 class（如
js-nav），用事件委托监听点击 - 获取
e.target.href，检查是否同源；若是，调用history.pushState({path: href}, '', href) - 立即执行对应路由的渲染逻辑（例如加载组件、更新 DOM、发起 API 请求）
- 注意：不要只依赖
href，应解析 pathname + search，避免 hash 或外部链接误处理
处理浏览器前进/后退（popstate 事件）
用户点击浏览器前后按钮时，不会自动触发路由变化，必须监听 popstate 并主动响应。
- 在初始化时绑定
window.addEventListener('popstate', e => { renderRoute(e.state?.path || location.pathname) }) -
e.state即之前pushState传入的对象，可用于恢复状态（如滚动位置、表单草稿） - 首次加载页面时，
location.pathname是真实 URL 路径，需在初始化阶段也调用一次路由渲染 - 避免重复渲染：可在
pushState前后统一维护一个 currentPath 变量做比对
服务端配合：确保所有路径都返回 index.html
若用户直接访问 /dashboard 或刷新该页面，服务器若按传统方式处理，会返回 404（因该路径无对应静态文件）。必须配置服务端将所有非资源请求（如 .js、.css、图片等除外）回退到 index.html。
- Nginx 示例：
location / { try_files $uri $uri/ /index.html; } - Vercel / Netlify：默认支持 SPA fallback，无需额外配置
- Express 示例：
app.get('*', (req, res) => res.sendFile(path.join(__dirname, 'index.html'))); - 关键点：静态资源路径需正确（如用
/static/js/app.js而非js/app.js），否则 fallback 会把 JS 请求也指向 HTML
