JavaScript通过History API实现无刷新导航，核心是pushState()添加历史记录、replaceState()替换当前记录、popstate事件监听用户前进/后退，配合URL解析与动态加载可构建SPA，服务端需返回统一入口页。
JavaScript 通过 History API 实现无刷新导航，核心是 pushState()、replaceState() 和 popstate 事件，不触发页面重载即可更新 URL 并管理历史栈。
使用 pushState 添加新历史记录
pushState() 在历史栈中新增一条记录，同时改变地址栏 URL（可跨路径），但不刷新页面。它接受三个参数：
-
state 对象：与该记录关联的任意数据（如页面标识、参数），后续可通过
event.state获取； - title：目前多数浏览器忽略此参数，可传空字符串；
- URL：新的相对或绝对路径（需同源），浏览器地址栏会更新，但不会发起请求。
示例：
history.pushState({ page: 'article', id: 123 }, '', '/article/123');用 replaceState 替换当前历史记录
当只想更新 URL 或 state 而不新增历史项时（比如表单提交后修正 URL），用 replaceState()。它行为类似 pushState()，但不增加新条目，而是覆盖当前历史状态。
示例：
history.replaceState({ page: 'search', q: 'js' }, '', '/search?q=js');监听浏览器前进/后退操作
用户点击返回/前进按钮时，会触发 popstate 事件，事件对象的 state 属性即为对应历史记录中保存的数据。
需提前绑定监听：
window.addEventListener('popstate', (event) => {if (event.state?.page === 'article') {
loadArticle(event.state.id);
}
});
注意：popstate 不会在 pushState 或 replaceState 调用时触发，只响应用户导航行为（含 JS 调用 history.back() 等）。
配合路由实现简易单页应用（SPA）导航
实际开发中，常结合 URL 解析与动态内容加载：
- 初始化时解析当前 URL，调用对应渲染函数；
- 所有内部链接用
event.preventDefault()阻止默认跳转； - 点击链接时调用
pushState()更新 URL，再手动渲染新内容； - 确保
popstate处理逻辑与 push 时一致，保持体验连贯。
关键点：服务端需配置为对所有前端路由返回同一 HTML 入口（如 index.html），避免 404。
