pushState本身不触发路由切换，仅修改URL和历史栈；真正的无刷新路由需监听popstate事件并手动执行渲染逻辑，且首次加载须主动匹配路径初始化视图。
pushState 本身不触发路由切换，它只改 URL 和历史栈 —— 真正的“无刷新路由”必须配合 popstate 事件监听 + 手动渲染逻辑，否则点击浏览器后退/前进按钮会白屏或跳转失败。
为什么调用 pushState 后页面没变化？
这是最常被误解的一点：pushState 不会加载新资源、不触发页面重绘、也不调用任何路由函数。它只是静默修改地址栏 URL 并向历史栈插入一条记录。
- 浏览器不会发起新的 HTTP 请求（不像
location.href = '/user'） - DOM 不会自动更新，你需要自己写代码去匹配新 URL 并替换内容
- 若未监听
popstate，用户点击「后退」时 URL 会变，但页面内容卡在原样
如何正确响应 URL 变化并更新视图？
必须同时处理两种情况：主动调用 pushState 后的手动渲染，以及用户操作浏览器导航按钮触发的 popstate。
- 每次调用
pushState后，立即执行对应的视图更新逻辑（比如renderPage('/user')） - 为
window绑定popstate事件，从中读取event.state或解析location.pathname来决定渲染哪页 - 注意：首次加载页面时不会触发
popstate，需在 JS 初始化阶段手动执行一次路由匹配
function handleRoute() {
const path = location.pathname;
if (path === '/user') renderUserPage();
else if (path === '/post') renderPostPage();
}
// 初始化
handleRoute();
// 监听浏览器导航
window.addEventListener('popstate', handleRoute);
// 切换路由时
function goTo(path) {
history.pushState({ path }, '', path);
handleRoute(); // 关键：不能漏掉这句！
}
pushState 的三个参数分别有什么坑？
pushState(state, title, url) 里最容易出错的是 url 参数：
立即学习“前端免费学习笔记（深入）”；
-
state：可存任意序列化对象，用于popstate事件中恢复状态（如滚动位置、表单数据），但不要放函数或 DOM 节点 -
title：目前所有主流浏览器都忽略该参数，传空字符串''即可 -
url：必须是**同源**的相对路径或绝对路径；不能跨域，也不能是完整 URL（如https://example.com/a会报错）；建议统一用以/开头的路径，避免相对路径解析混乱
SPA 中容易被忽略的兼容性与边界问题
真实项目里这几个点常导致线上故障：
- 服务端没配置 fallback：直接访问
/user会 404，必须让服务器对所有非静态资源请求返回index.html -
pushState不会触发beforeunload，如有未保存表单，需自行监听popstate做拦截提示 - Android WebView 和旧版 iOS Safari 对
state对象大小有限制（通常 ≤ 640KB），超限会导致pushState静默失败 - SEO 友好性依赖预渲染或 SSR，仅靠
pushState+ 客户端渲染，爬虫基本抓不到内容
真正难点不在调用 pushState 这一行代码，而在于整个导航生命周期的闭环：URL 变更 → 视图响应 → 浏览器按钮兼容 → 服务端兜底 → 用户状态保持。少一环，就不是“无刷新”，而是“无响应”。
