HTML传统导航触发完整页面重载且无法干预，History API则支持无刷新修改URL和历史栈；pushState新增记录，replaceState替换当前记录；popstate监听前进/后退，非hashchange；需服务端fallback、注意state大小与跨域限制。
HTML 传统导航和 HTML5 History API 的本质区别
传统 HTML 页面跳转（比如点击 ）会触发完整页面重载，浏览器历史栈里新增的是完整的 URL 条目，history.length 会增加，但 JS 无法干预跳转前后的状态。而 HTML5 的 History API（pushState()、replaceState()、popstate 事件）允许你在不刷新页面的前提下修改地址栏 URL，并主动向历史栈添加或替换记录——这是单页应用（SPA）实现无刷新导航的基础。
pushState() 和 replaceState() 的行为差异
两者都用于修改当前 URL 并影响浏览器历史，但关键区别在是否新增历史条目：
-
pushState()：在历史栈「末尾新增一条记录」，用户点后退会回到上一个状态（哪怕只是同一个页面的不同视图） -
replaceState()：「替换当前历史条目」，不增加长度，适合更新 URL 但不想让用户多按一次后退（比如表单提交后修正 URL，或初始化时补全 hash 后清理） - 两个方法的参数格式一致：
pushState(stateObj, title, url)，其中title当前多数浏览器忽略，url必须同源，stateObj是可序列化的 JS 对象，会在popstate事件中还原
history.pushState({ page: 'detail', id: 123 }, '', '/item/123');
history.replaceState({ page: 'search', q: 'react' }, '', '/search?q=react');
监听后退/前进必须用 popstate，不是 hashchange
hashchange 只响应 URL 中 # 后面的变化，而 popstate 响应所有由 pushState/replaceState 触发的历史栈变化（包括前进、后退、甚至 JS 主动调用 history.back()）。注意：
-
popstate事件只在用户点击浏览器前进/后退按钮，或调用history.back()/history.forward()时触发，pushState本身不会触发它 - 首次加载页面时（即 history 栈初始状态），即使 URL 是通过
pushState设置的，也不会触发popstate；如需初始化，得手动读取location.pathname或history.state - 事件对象的
state属性就是你传入pushState的那个对象，可用于恢复 UI 状态
window.addEventListener('popstate', (event) => {
if (event.state && event.state.page === 'detail') {
loadItem(event.state.id);
}
});
容易被忽略的兼容性与陷阱
看似简单，但实际项目中几个坑反复出现：
立即学习“前端免费学习笔记（深入）”；
- 服务端未配置 fallback：使用
pushState跳转到/user/123后直接刷新，如果服务器没把所有前端路由都指向index.html，就会 404 —— 这不是 JS 问题，是服务器配置问题 -
state对象有大小限制（Chrome 约 640KB，Firefox 更小），别塞大 JSON 或 DOM 引用 -
pushState的url参数不能跨域，也不能是绝对路径以外的协议（如file://） - 移动端 WebView（尤其旧版 Android）对
popstate触发时机不稳定，有时需要结合visibilitychange或定时检测history.state变化来兜底
最常被漏掉的一点：没有监听 popstate 就等于放弃了对用户后退键的控制权，这时候用户一按后退，页面就真刷新了——因为浏览器找不到对应的历史状态，只能回退到上一个完整页面。
