javascript中bom的history对象通过pushstate()、replacestate()和popstate事件实现spa无刷新路由，前者添加或替换历史记录并更新url，后者监听浏览器前进后退操作并获取状态对象。
JavaScript 中通过 BOM 的 history 对象可以实现单页应用（SPA）的无刷新路由跳转与前进后退，核心是利用 pushState()、replaceState() 和监听 popstate 事件。
用 pushState 添加新历史记录（模拟“前进”）
pushState() 不会触发页面刷新，但会在浏览器历史栈中新增一条记录，并可携带任意状态对象和设置 URL（需同源）：
- 语法：
history.pushState(state, title, url) -
state：任意可序列化的 JS 对象（如{page: 'user', id: 123}），会随popstate事件一起传递 -
title：目前多数浏览器忽略该参数，传空字符串''即可 -
url：相对路径或绝对路径（必须同源），例如'/user/123'，浏览器地址栏会更新，但不发起请求
示例：history.pushState({page: 'product'}, '', '/product/456');
此时用户点击浏览器「后退」按钮，URL 会变回上一个状态，且触发 popstate 事件。
用 replaceState 替换当前历史记录（避免多余回退点）
当需要更新当前页面状态但不想增加新的历史条目时（比如表单筛选条件变化），用 replaceState()：
- 语法与
pushState相同：history.replaceState(state, '', url) - 它只替换当前历史项，不会影响「前进/后退」按钮的可用性数量
- 适合：修改 URL 参数但不希望用户能退回「上一步」（如分页、搜索关键词变更）
示例：history.replaceState({page: 'list', query: 'js'}, '', '/list?q=js');
Java JDK 25 来自 OpenJDK 官方归档，版本为 JDK 25，本条下载地址已指向官方 Windows x64 zip 安装包直链，适合调试旧项目或兼容旧版 Java 运行环境。
监听 popstate 事件响应浏览器前进/后退
用户点击浏览器原生「前进」「后退」按钮，或调用 history.forward()/history.back() 时，会触发 popstate 事件：
- 绑定方式：
window.addEventListener('popstate', handler) - 事件对象的
event.state就是之前pushState或replaceState传入的 state 对象 - 注意：
popstate在页面首次加载时不会触发（即使 URL 带有 state），需手动解析初始 URL 并渲染对应视图
示例：
window.addEventListener('popstate', (e) => {<br>
if (e.state && e.state.page === 'user') {<br>
renderUserPage(e.state.id);<br>
} else if (e.state?.page === 'home') {<br>
renderHomePage();<br>
}<br>
});
手动控制前进/后退（慎用）
可通过 history.back()、history.forward()、history.go(n) 模拟用户操作：
-
history.back()等价于点击「后退」按钮 -
history.go(-2)向前跳两步（负数为后退，正数为前进） - ⚠️ 注意：这些方法仅改变历史位置，不会自动触发
popstate（因为它们本身就是导航动作），但会引发后续的popstate事件（在目标历史项被激活后）
实际开发中，建议封装一个 navigate(to) 方法统一处理 push/replace，并在内部同步更新 UI，避免直接裸调 back()/forward() 导致状态不同步。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
