JavaScript如何修改URL地址？

有志者，事竟成！如果你在学习文章，那么本文《JavaScript路由如何修改URL？》，就很适合你！文章讲解的知识点主要包括，若是你对本文感兴趣，或者是想搞懂其中某个知识点，就请你继续往下看吧~

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。

适用场景很具体：

• 表单提交成功后跳转结果页，且不希望用户退回表单页 → 用 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 结构和路由匹配逻辑。

理论要掌握，实操不能落！以上关于《JavaScript如何修改URL地址？》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！