JavaScript 通过 History API 实现无刷新导航：pushState 添加历史条目、replaceState 替换当前条目、popstate 监听前进/后退事件；需配合手动渲染、服务端 fallback 和滚动控制。
使用 JavaScript 操作浏览器历史记录，核心是 History API，它让页面在不刷新的前提下更新 URL、保存状态，并支持前进/后退——这是实现无刷新导航（如单页应用 SPA）的基础。
用 pushState 添加新历史条目
调用 history.pushState(state, title, url) 可向历史栈插入一条新记录：
-
state：任意可序列化的对象，会随该条目一起保存，后退/前进时通过
popstate事件读取 -
title：目前大多数浏览器忽略此参数，传空字符串
''即可 - url：相对路径或绝对路径，必须同源；不会触发页面跳转，但地址栏会更新
例如：history.pushState({page: 'about'}, '', '/about');
执行后 URL 变为 /about，但页面不刷新，DOM 保持原样——你需要手动更新内容（比如用 AJAX 加载模板、替换 DOM）。
用 replaceState 替换当前历史条目
当不想增加历史长度（比如表单提交后修正 URL），用 history.replaceState(state, title, url)：
它不新增条目，而是修改当前历史项的 state 和 URL。常见于初始化页面时修正初始 URL（如去掉 hash 或添加 query 参数）。
例如：history.replaceState({page: 'home'}, '', '/');
这能让首页 URL 更干净，又不影响用户点击后退。
监听 popstate 响应浏览器导航
用户点击前进/后退按钮，或调用 history.back() 等方法时，会触发 popstate 事件：
- 事件对象的
event.state就是对应历史条目中保存的 state 对象 - 注意：页面首次加载时（非导航触发）不会触发 popstate；需手动读取
history.state初始化视图
示例监听写法：
window.addEventListener('popstate', (e) => {
if (e.state && e.state.page === 'about') {
loadPage('about'); // 自定义渲染逻辑
}
});
注意事项与实用建议
无刷新导航不是仅靠 History API 就能完成的，还需配合其他环节：
立即学习“Java免费学习笔记（深入）”；
- 服务端需配置 fallback：所有前端路由路径都返回同一份 HTML（如 index.html），否则直接访问
/about会 404 - 确保链接
默认行为被阻止（e.preventDefault()），再调用pushState+ 手动渲染 - 滚动行为需自行管理：History API 不自动滚动，可用
scrollRestoration = 'manual'配合window.scrollTo()控制 - 避免滥用：非必要不 pushState，比如只是切换标签页内局部状态，用 URL hash 或组件内部状态更轻量
掌握这三类操作（push、replace、popstate）并衔接好数据加载与视图更新，就能稳定实现体验接近原生的无刷新导航。
