能实现，但必须配合服务端配置和前端路由监听，否则刷新页面会404或跳转失败；pushState仅改URL和历史栈，需手动监听popstate并渲染，且首次加载须读取location.pathname决定视图。
能实现，但必须配合服务端配置和前端路由监听，否则刷新页面会404或跳转失败。
pushState 之后浏览器地址变了，但页面没更新？
这是正常现象——pushState 只修改 URL 和历史栈，不触发页面加载或路由匹配。你得自己监听 popstate 事件并手动渲染对应内容。
- 必须在初始化时检查
location.pathname，决定首次渲染哪个视图 - 后续通过
window.addEventListener('popstate', handler)捕获后退/前进操作 -
popstate不会在pushState或replaceState时触发，只响应用户导航行为（如点击返回按钮） - 事件对象的
state是你传给pushState的第一个参数，可用于携带路由元数据
调用 pushState 时 state、title、url 三个参数怎么填？
title 参数目前所有主流浏览器都忽略，传空字符串 '' 即可；state 应是可序列化的对象（如 {page: 'user', id: 123}），别放函数或 DOM 节点；url 必须同源，且建议用相对路径（如 '/users/123'），避免意外跨域或协议不一致。
- 错误示例：
history.pushState({}, '', 'https://evil.com/hack')→ 浏览器直接报错 - 安全建议：URL 由前端路由表严格校验，不要拼接用户输入
- 如果用单页应用（SPA），
url应与后端配置的 fallback 路径对齐（见下一条）
刷新页面直接 404？服务端必须做 fallback
前端路由靠 JS 控制，但用户刷新时浏览器会向服务端发起真实请求。若服务端没配 fallback，/settings 这种路径大概率返回 404。
立即学习“前端免费学习笔记（深入）”；
- Webpack Dev Server：设
historyApiFallback: true - Vite：默认已开启
server.historyApiFallback - Nginx：加
try_files $uri $uri/ /index.html;到 location 块 - Express：用
app.use('*', (req, res) => res.sendFile(indexHtmlPath)) - 注意：API 请求（如
/api/users）不能被 fallback 拦截，需前置判断路径前缀
replaceState 和 pushState 的实际区别在哪？
replaceState 替换当前历史记录项，不会增加新条目；pushState 插入新条目。这直接影响用户能否用浏览器后退按钮回到上一个状态。
- 表单提交成功后跳转到结果页，适合用
pushState（用户应能后退） - 修正 URL 中的查询参数（如分页
?page=2），适合用replaceState（不希望后退回到旧参数） - 两者都不会触发
popstate，仅改变历史栈和地址栏 - 频繁调用
pushState可能撑爆 history stack（虽极少触发限制，但要注意）
最常被忽略的是服务端 fallback 配置——前端代码再完善，没它，用户一刷新就掉出 SPA。还有就是首次加载时没人主动触发 popstate，必须手动读取 location 并渲染，这点容易漏掉。
