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

最近,遇到这样一个需求:需要修改浏览器地址栏中的 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 变更。

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

相关推荐
安全系统学习11 分钟前
系统安全之大模型案例分析
前端·安全·web安全·网络安全·xss
涛哥码咖27 分钟前
chrome安装AXURE插件后无效
前端·chrome·axure
OEC小胖胖38 分钟前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
行云&流水1 小时前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
Sally璐璐1 小时前
零基础学HTML和CSS:网页设计入门
前端·css
老虎06271 小时前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html
灿灿121381 小时前
CSS 文字浮雕效果:巧用 text-shadow 实现 3D 立体文字
前端·css
烛阴2 小时前
Babel 完全上手指南:从零开始解锁现代 JavaScript 开发的超能力!
前端·javascript
AntBlack2 小时前
拖了五个月 ,不当韭菜体验版算是正式发布了
前端·后端·python
31535669132 小时前
一个简单的脚本,让pdf开启夜间模式
前端·后端