pushState(state, title, url)用于无刷新更新URL并添加历史记录：state为可序列化数据，title被忽略，url须同源相对路径；需配合popstate事件手动渲染，且服务端需配置fallback。
pushState 方法的基本调用形式和参数含义
pushState 不会触发页面刷新，但会改变地址栏 URL 并向浏览器历史栈添加一条新记录。它的标准签名是：history.pushState(state, title, url)。
三个参数中，state 是任意可序列化的 JS 值（比如对象或字符串），会在后续 popstate 事件中作为 event.state 返回；title 目前所有主流浏览器都忽略它，传空字符串 '' 最安全；url 是相对当前 origin 的路径（如 '/user/123'），必须同源，否则抛出 SecurityError。
- URL 不能跨域，也不能带协议或主机名（
https://example.com/foo❌） - 如果只改查询参数（如
/search?q=js→/search?q=ts），pushState完全适用 -
state对象大小建议控制在 640KB 以内，超出可能被截断（Chrome 限制）
配合 popstate 事件实现路由响应
仅调用 pushState 不会自动渲染新内容——你得自己监听 popstate 并更新视图。这个事件只在用户点击后退/前进按钮、或调用 history.back() 等导航行为时触发，**不会**在 pushState 或 replaceState 调用时触发。
典型写法：
立即学习“前端免费学习笔记（深入）”；
window.addEventListener('popstate', (event) => {
const { state } = event;
// 根据 location.pathname 或 state 决定渲染哪个组件
renderRoute(location.pathname);
});
- 首次加载页面时，
popstate不会触发，需手动调用一次renderRoute(location.pathname) -
state可能为null（比如用户直接输入 URL 后回退到该页），代码里要判断 - 不要依赖
event.state存关键状态（如 token），它不持久，刷新后就丢
与 a 标签点击的兼容处理
用户点击普通 <a href="/about"> 会触发完整页面跳转，破坏单页体验。必须拦截这类默认行为。
常见做法是事件委托监听所有站内链接：
document.addEventListener('click', (e) => {
if (e.target.matches('a[href^="/"]')) {
e.preventDefault();
const url = e.target.getAttribute('href');
history.pushState({ path: url }, '', url);
renderRoute(url);
}
});
- 注意排除外链（
href以http开头）、锚点（href="#section"）、下载链接（download属性） - 服务端仍需配置 fallback：所有前端路由路径都返回同一份 HTML（如
index.html），否则用户刷新会 404 - 使用
router-link类库（如 Vue Router）本质也是封装了这套拦截 +pushState+popstate流程
容易被忽略的 URL 规范和 SEO 影响
虽然 pushState 让 URL 看起来“真实”，但它本身不发送网络请求，搜索引擎爬虫不会执行 JS，也就不会触发你的 pushState 或 popstate 逻辑。
- 纯客户端路由对 SEO 不友好，除非配合服务端渲染（SSR）或静态生成（SSG）
-
url参数必须是合法路径，避免空格、中文未编码（应为%E4%BD%A0%E5%A5%BD）等，否则pushState抛DOMException: Failed to execute 'pushState' on 'History' - 调试时可用
history.length和history.state快速查看当前栈长度和顶层 state
真正难的不是调用 pushState，而是确保所有入口（直接访问、后退、链接跳转、API 返回后跳转）都走同一套状态同步逻辑，且不漏掉 history 栈的清理或重复插入。
