news 2026/4/23 16:27:05

删除 地址栏 地址里的 某个的参数 无感刷新页面

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
删除 地址栏 地址里的 某个的参数 无感刷新页面
consturl=newURL(window.location.href);url.searchParams.delete('abc');window.history.replaceState(null,'',url.toString());意思就是 删除 地址栏 地址里的 abc的参数 www.666.com?abc=123删完之后 就是 www.666.com

这段代码的作用就是在不刷新页面的前提下,从浏览器地址栏中删除 URL 的某个查询参数(这里是abc


逐行解释:

consturl=newURL(window.location.href);
  • 创建一个URL对象,解析当前页面的完整 URL(比如https://www.666.com?abc=123&def=456)。
url.searchParams.delete('abc');
  • 调用URLSearchParams.delete('abc')方法,移除查询字符串中名为abc的参数
  • 无论abc有没有值(如?abc?abc=123),都会被彻底删除。
  • 其他参数(如def=456)不受影响。
window.history.replaceState(null,'',url.toString());
  • 使用history.replaceState()替换当前历史记录条目,将 URL 更新为删除abc后的新地址;
  • null表示不存储额外状态数据;
  • 第二个参数是标题(现代浏览器基本忽略);
  • 第三个参数是新的 URL(不含abc);
  • 关键:这不会触发页面跳转或刷新!

举个例子:

原始 URL:

https://www.666.com?abc=123&xyz=789

执行代码后,地址栏变成:

https://www.666.com?xyz=789

如果原始 URL 是:

https://www.666.com?abc=123

执行后就变成:

https://www.666.com

✅ 完全符合你的描述。


补充说明

  • 这种方式常用于:用户完成某个操作后(比如关闭弹窗、清除筛选条件),清理 URL 中的临时参数,保持地址干净。
  • 相比window.location.href = ...,它不会重新加载页面,用户体验更流畅。
  • 如果你希望保留历史记录(点返回能回到带参数的状态),可以用pushState而不是replaceState

封装成函数(推荐复用)

functionremoveUrlParam(paramName){consturl=newURL(window.location.href);url.searchParams.delete(paramName);window.history.replaceState(null,'',url.toString());}// 使用removeUrlParam('abc');

这样你就可以轻松删除任意参数了 ✅

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/4/23 6:58:51

基于SpringBoot的小区健身房管理系统设计与实现-计算机毕业设计源码+LW文档

基于SpringBoot的小区健身房管理系统设计与实现论文章节 摘要 本文围绕基于SpringBoot的小区健身房管理系统展开,阐述其研究背景意义、需求分析及功能设计。该系统旨在解决小区健身房传统管理方式效率低、服务体验差等问题,借助信息化手段提升管理效率、…

作者头像 李华
网站建设 2026/4/23 14:35:44

图片批理重命名,图片格式转化为jpg、jpeg、bmp、png、gif、tiff和

介绍 最简单的图片格式批量转化工具,作者说是开发给老婆使用的~ 不过既然发出来了,我想咱们也应该是可以用的 切身体验,软件操作非常简单。 只需选好需要处理的图片文件夹和导出文件夹。再选择好希望导出的格式就可以了。 目前软件支持将…

作者头像 李华
网站建设 2026/4/23 13:35:30

软考高项【高频考点】【2026必考重点】—第10章 项目进度管理

项目进度管理是软考高项的核心章节,概念题、计算题、论文题均会涉及,核心围绕“规划-定义-排序-估算-制定-控制”6大过程展开,以下是提炼的高频考点: 一、核心过程框架(过程题必考) 项目进度管理包含6个…

作者头像 李华
网站建设 2026/4/23 15:02:31

机场货库区平板车的集中式调度之改进A算法 + 时空A(考虑动态障碍物)结合 MILP + 启发式搜索的思路

针对机场货库区平板车的集中式调度场景,提出的 改进A算法 时空A(考虑动态障碍物) 结合 MILP 启发式搜索 的思路非常贴合实际需求。这是一个典型的多约束、动态环境下的路径规划与调度优化问题。旨在实现行驶时间、等待时间与能耗的最小化。…

作者头像 李华
网站建设 2026/4/23 3:43:12

TurboDiffusion在社交媒体内容创作的应用,方案详解

TurboDiffusion在社交媒体内容创作的应用,方案详解 1. 社交媒体内容创作的痛点与TurboDiffusion的破局点 你有没有经历过这样的时刻:为一条短视频绞尽脑汁构思脚本,反复修改提示词,等了整整三分钟,结果生成的视频模糊…

作者头像 李华
网站建设 2026/4/23 5:14:46

如何准备Qwen3-1.7B微调数据集?手把手教学

如何准备Qwen3-1.7B微调数据集?手把手教学 微调大模型的第一步,往往不是写代码,而是准备好能让模型真正学会“说话”的数据。很多人卡在微调环节,不是因为不会调参,而是数据集没理清楚:格式不对、结构混乱…

作者头像 李华