history.pushState() 通过向浏览器历史栈添加新记录来更新URL且不刷新页面，需传入可序列化state对象、非null标题及同源URL。
history.pushState() 怎样不刷新页面改 URL
前端路由的核心就是改 URL 却不触发页面重载，history.pushState() 是最直接的方式。它向浏览器历史栈添加一条新记录，同时更新地址栏，但不会请求服务器或刷新当前页面。
常见错误是只传了 url 却忽略前两个参数，导致状态丢失或调试困难：
-
state参数必须是可序列化的对象（不能是函数、DOM 节点等），否则后续popstate事件里拿不到有用信息 -
title在多数浏览器中被忽略，但必须传字符串（不能为null或undefined），否则报错 -
url必须与当前 origin 同源，跨域会直接抛SecurityError
history.pushState({ page: 'detail', id: 123 }, '', '/item/123');
注意：第三个参数是相对路径，浏览器会自动补全为完整 URL；如果写成 'http://example.com/item/123'，会因跨 origin 失败（除非同域）。
router.push() 和 history.replaceState() 有什么区别
很多框架封装了 push，比如 Vue Router 的 router.push() 或 React Router 的 navigate()，它们底层大多调用 history.pushState()。而 history.replaceState() 不新增历史记录，而是替换当前条目 —— 这意味着用户点击「后退」不会回到上一个 URL。
立即学习“Java免费学习笔记（深入）”；
适用场景很具体：
- 表单提交成功后跳转结果页，且不希望用户退回表单页 → 用
replaceState() - URL 修正（如把
/user?id=123规范为/user/123）→ 用replaceState()避免污染历史栈 - 普通导航（如侧边栏点击跳转）→ 用
pushState()
history.replaceState({ page: 'profile' }, '', '/profile');
监听 URL 变化要用 popstate，不是 hashchange
只要用了 pushState() 或 replaceState()，就必须监听 popstate 事件来响应浏览器前进/后退操作。别误用 hashchange —— 它只对 #xxx 变化有效，和现代前端路由无关。
关键细节：
-
popstate仅在用户点击浏览器前进/后退按钮，或调用history.back()等时触发，不会因pushState()自身触发 - 事件对象的
state就是pushState()第一个参数，但首次加载页面时为null（需兼容） - 不要在
popstate里重复调用pushState()，否则可能陷入无限循环
window.addEventListener('popstate', (event) => {
const state = event.state;
if (state?.page === 'detail') {
renderDetail(state.id);
}
});
直接修改 location.href 会刷新页面
这是最容易踩的坑：location.href = '/new-page' 或 location.assign('/new-page') 都会触发完整页面加载，彻底绕过前端路由逻辑。哪怕你已注册 popstate，也收不到任何通知。
唯一安全的 location 操作是改 hash（location.hash = '#/foo'），但它走的是 hashchange 流程，和 pushState() 不兼容，也不符合现代 SEO 和语义要求。
所以结论很明确：只要想走前端路由，所有 URL 变更都必须经由 history.pushState() 或 history.replaceState()，其他路径都是旁门左道。
真正难的不是怎么改 URL，而是确保每次 URL 变更都同步驱动视图更新，且历史栈干净、状态可恢复 —— 这些得靠你维护好 state 结构和路由匹配逻辑。
