JavaScript通过window.history实现SPA无刷新导航：pushState添加历史记录并更新URL，replaceState修改当前记录，popstate监听前进/后退，back/forward/go提供基础导航，均受同源策略限制。
JavaScript通过window.history对象提供对浏览器会话历史的访问和控制能力，主要用于单页应用（SPA）中实现无刷新跳转、前进后退逻辑和URL状态同步。
使用pushState添加新历史记录
pushState()在不刷新页面的前提下向历史栈添加一条新记录，并更新地址栏URL。它不会触发页面加载，但会改变当前URL并影响浏览器前进/后退行为。
- 语法：
history.pushState(state, title, url) -
state：一个可序列化的对象，随该记录一起保存，后续通过popstate事件获取 -
title：目前大多数浏览器忽略此参数，可传空字符串 -
url：相对或绝对路径，必须同源，否则抛出安全错误
例如：history.pushState({page: 'about'}, '', '/about') 将URL变为/about，同时保存状态对象。
使用replaceState修改当前历史记录
replaceState()与pushState()类似，但不新增记录，而是替换当前历史条目。适用于更新URL但不想让用户多按一次“后退”才能离开当前页的场景，比如表单提交后清除查询参数。
立即学习“Java免费学习笔记（深入）”；
- 语法：
history.replaceState(state, title, url) - 常用于：修改哈希、更新搜索参数、隐藏敏感信息
例如：history.replaceState(null, '', '?q=js#results') 仅更新当前项，不增加历史长度。
监听popstate事件响应导航变化
当用户点击浏览器前进/后退按钮，或调用history.back()、history.forward()时，会触发popstate事件。注意：直接调用pushState或replaceState不会触发该事件。
- 需绑定到
window对象：window.addEventListener('popstate', handler) - 事件对象的
state属性即为对应历史记录中保存的state对象 - 通常在此事件中重新渲染页面内容或恢复UI状态
例如：window.addEventListener('popstate', e => { renderPage(e.state?.page || 'home'); });
基础导航方法与注意事项
history.back()、history.forward()、history.go(n)可模拟用户点击按钮的行为，但依赖历史栈长度。若超出范围则静默失败。
-
history.length返回当前会话的历史条目数（包括当前页），但无法读取具体URL或state - 所有history API操作都受同源策略限制，跨域调用会报错
- 服务端需配置支持前端路由（如将所有路径 fallback 到
index.html），否则直接访问新URL会404
不复杂但容易忽略。
