history.pushState() 可在不刷新页面下添加历史记录并更新 URL，参数为 state（序列化对象）、title（多数浏览器忽略）、url（同源路径）；需配合 popstate 事件手动响应前进后退。
使用 history.pushState() 可以在不刷新页面的前提下，向浏览器历史栈添加一条新记录，并更新地址栏 URL（包括路径、查询参数），同时还能保存自定义状态数据。关键在于它只改历史和 URL，不触发页面跳转或重新加载。
基本语法和参数说明
history.pushState(state, title, url) 接收三个参数：
-
state：一个可序列化的 JavaScript 对象（如普通对象、数组），会被保存到历史记录中，后续通过
popstate事件读取；不能是函数或 DOM 节点 -
title：目前大多数浏览器会忽略该参数，传空字符串
''即可 - url：相对路径或绝对路径（必须同源），用于更新地址栏；不会发起网络请求，也不会跳转
典型使用示例
比如当前页面是 https://example.com/home，想改成 /product/123?ref=sidebar 并存下商品 ID：
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
const state = { productId: 123, from: 'sidebar' };
history.pushState(state, '', '/product/123?ref=sidebar');
此时地址栏变为 https://example.com/product/123?ref=sidebar，页面保持不动，但历史栈多了一条记录。
立即学习“Java免费学习笔记（深入）”；
配合 popstate 实现前进后退响应
pushState 添加的记录，用户点击浏览器“后退”时不会自动还原页面内容——你需要监听 popstate 事件手动处理：
- 监听事件：
window.addEventListener('popstate', (e) => { console.log(e.state); }) -
e.state就是之前传入pushState的那个对象 - 在回调里根据
e.state和当前location.pathname更新视图（例如用 AJAX 加载内容、切换 React 组件等）
注意事项和常见坑
- URL 必须同源：不能跨域，否则抛出安全错误
-
不会触发 load 或 hashchange：只有
popstate在前进/后退时触发，且初始页面加载不会触发 -
title 参数别依赖：Chrome/Firefox 已基本不使用它，不要靠它设置页面标题；需改标题请用
document.title = ... - SEO 不会自动识别：搜索引擎爬虫通常不执行 JS，纯前端路由需服务端配合（如 SSR 或预渲染）才能被正确索引
