JavaScript通过History API实现无刷新导航，核心方法为pushState()、replaceState()及popstate事件，支持真实URL路径、SEO友好、可前进后退；需服务端配合返回统一入口，并手动处理页面更新。
JavaScript 通过 History API 操作浏览器历史记录，实现无刷新页面导航。核心是 pushState()、replaceState() 和 popstate 事件，不依赖 URL 哈希（#），支持真实路径、SEO 友好、可前进后退。
使用 pushState 添加新历史记录
在不刷新页面的前提下，向历史栈中添加一条新记录，并更新地址栏 URL（需同源）：
-
history.pushState(state, title, url)——state是任意可序列化对象（如 {page: 'about'}），title当前多数浏览器忽略，url是相对或绝对路径（必须同源） - 示例：
history.pushState({page: 'product'}, '', '/product/123')会将地址栏变为/product/123，但不触发页面加载 - 注意：URL 不必真实存在，但需服务器配置支持（如所有前端路由都返回 index.html）
用 replaceState 替换当前历史记录
不新增记录，只修改当前条目的 state 和 URL，适合表单筛选、分页参数变更等场景：
-
history.replaceState({sort: 'price'}, '', '?sort=price')—— 地址栏变为?sort=price，后退时不会回到旧参数 - 常用于更新 URL 参数而不影响历史栈深度
监听 popstate 响应浏览器前进/后退
用户点击前进/后退按钮，或调用 history.back() 等时触发：
立即学习“Java免费学习笔记（深入）”；
- 绑定事件：
window.addEventListener('popstate', (e) => { console.log(e.state); }) -
e.state即之前传入pushState或replaceState的 state 对象 - 需在此事件中手动更新页面内容（如加载新数据、渲染组件），否则仅 URL 变化，页面不动
注意事项与常见配合
无刷新导航不是“全自动”的，需前后端协同：
- 服务端需对所有前端路由返回同一 HTML 入口（如 Nginx 配置
try_files $uri $uri/ /index.html;） - 首次访问带深层路由（如
/user/5）时，页面需根据当前 URL 初始化状态（不能只靠 popstate） - 可结合
fetch或XHR加载新内容，再用 DOM 操作或框架（React/Vue）更新视图 - 避免直接操作
location.href或location.hash，除非明确需要哈希模式
