产品:页面的地址要改变,但是不能刷新页面

最近,遇到这样一个需求:需要修改浏览器地址栏中的 URL,但不能刷新页面 。传统的 window.location 赋值,会导致页面重载。那么,有没有办法避免刷新,同时更新 URL 呢?

答案是有的! 我们可以使用 History APIHash 机制来实现这一需求(无刷新修改 URL)。

无刷新修改 URL

1、history.pushState():新增历史记录

pushState 能够在不刷新页面的情况下,向浏览器历史记录中添加一条新记录,并更新 URL。注意:这个方法是可以使用户可以使用浏览器的"前进"和"后退"按钮进行导航。

js 复制代码
history.pushState({ page: 1 }, document.title, '/new-url');

特点:

  • URL 变化,但页面不会刷新。
  • 新增历史记录,用户可以使用"前进"和"后退"按钮进行导航。
  • 适用于单页应用(SPA)

2、history.replaceState():替换当前历史记录

pushState() 类似,但 replaceState() 是替换当前的历史记录,而不会创建新的记录。

js 复制代码
history.replaceState({ page: 2 }, document.title, '/another-url');

特点:

  • URL 变化,但页面不会刷新。
  • 不会新增历史记录,用户点击"后退"不会回到之前的 URL。
  • 适用于临时性 URL 变更,如动态筛选、修正错误 URL。

3、window.location.hash: 基于 Hash 的 URL 变更

与此同时,我们也通过修改 URL 中的锚点(hash)部分,也能实现无刷新效果:

js 复制代码
window.location.hash = 'section1';

特点:

  • URL 变化但页面不刷新。
  • hashchange 事件可用于监听 URL 变化。
  • 适用于简单的前端路由,但不能修改 ? 前面的路径。

使用场景对比

方法 是否刷新页面 是否新增历史记录 是否支持参数 适用场景
history.pushState 用户导航、复杂状态管理
history.replaceState 修正错误 URL、临时状态调整
window.location.hash ✅(锚点历史) ❌(支持锚点参数) 页面内导航、简单状态更新

主要是注意以下两点:

  • 是否新增历史记录,决定了用户是否可以"后退"回到之前的 URL。
  • 是否可修改查询参数 ,决定了是否可以更新 ?query=value 形式的参数。

扩展(如何监控 URL 变化)

  1. 监听 URL 变化:popstate
js 复制代码
window.addEventListener('popstate', (event) => {
  console.log('用户点击了后退/前进', event.state);
});
  1. 监听 Hash 变化: hashchange
js 复制代码
window.addEventListener('hashchange', () => {
  console.log('Hash 变化为:', window.location.hash);
})

结语

  • 推荐使用 history.pushState() 来更新 URL 并维护历史记录。
  • 如果只是想更新 URL 而不影响历史记录,可使用 replaceState()
  • 如果需要兼容老旧浏览器,或者仅仅是前端页面内导航,可以使用 window.location.hash

在实际开发中,我们可以根据需求选择最合适的方案。例如,在 Vue Router 或 React Router 等框架中,已经封装了 History API,我们可以直接使用 router.push()router.replace() 进行 URL 变更。

希望这篇文章能对你有所帮助、有所借鉴!

相关推荐
风清云淡_A2 分钟前
【angular19】入门基础教程(一):项目的搭建与启动
前端·angular.js
好_快14 分钟前
Lodash源码阅读-without
前端·javascript·源码阅读
Sc Turing15 分钟前
【Vue3-Bug】中路由加载页面直接显示空白
前端·bug
好_快16 分钟前
Lodash源码阅读-baseDifference
前端·javascript·源码阅读
云之兕19 分钟前
Spring Boot 中多线程的基础使用
java·前端·spring boot
LaughingZhu1 小时前
PH热榜 | 2025-04-26
前端·数据库·人工智能·mysql·开源
萌萌哒草头将军7 小时前
⚡⚡⚡尤雨溪宣布开发 Vite Devtools,这两个很哇塞 🚀 Vite 的插件,你一定要知道!
前端·vue.js·vite
小彭努力中8 小时前
7.Three.js 中 CubeCamera详解与实战示例
开发语言·前端·javascript·vue.js·ecmascript
浪裡遊8 小时前
跨域问题(Cross-Origin Problem)
linux·前端·vue.js·后端·https·sprint
LinDaiuuj8 小时前
判断符号??,?. ,! ,!! ,|| ,&&,?: 意思以及举例
开发语言·前端·javascript