应使用 URL 构造函数 + URLSearchParams 安全操作 URL 参数,避免直接赋值 window.location.href 导致意外跳转;需更新地址栏而不刷新时,用 history.pushState() 或 replaceState() 配合 new URL()。

熟悉。但要注意:window.location 是只读对象(大部分属性),直接赋值会触发页面跳转,不是“操作”而是“导航”。真正安全可控的 URL 处理,应该用 URL 构造函数 + URLSearchParams。
为什么不能直接改 window.location.href 来“修改参数”?
因为写入 window.location.href = '...' 会立即刷新页面——这不是编辑,是重定向。常见误操作:想加一个 query 参数却导致白屏或无限重定向。
- 想保留当前页状态(如滚动位置、表单输入)?不能靠改
href - 想避免刷新但更新地址栏(如 SPA 路由)?必须用
history.pushState()或history.replaceState() - 想纯解析/构造 URL 字符串?别碰
location,用new URL()
new URL() 怎么安全地增删查改 query 参数?
它返回可变的 URL 实例,searchParams 属性支持标准的增删改查,不触发跳转。
const url = new URL('https://example.com/path?x=1&y=2');
url.searchParams.set('y', '3'); // 修改 y=3
url.searchParams.append('z', '4'); // 追加 z=4
url.searchParams.delete('x'); // 删除 x
console.log(url.href); // https://example.com/path?y=3&z=4
-
set(key, value):覆盖同名参数(只留一个) -
append(key, value):允许重复 key(如?tag=a&tag=b) - 修改后要用
url.href或url.toString()获取完整字符串 - 不支持直接操作 hash 或 pathname 的 query 部分——
searchParams只管?后面
如何在不刷新的前提下更新浏览器地址栏?
用 history.replaceState()(替换当前历史项)或 history.pushState()(新增历史项),再配合 new URL() 构造目标 URL。
立即学习“Java免费学习笔记(深入)”;
const url = new URL(window.location);
url.searchParams.set('page', '2');
history.replaceState(null, '', url); // 地址栏变,不刷新,不新增历史
- 第三个参数必须是合法 URL 字符串或
URL对象(现代浏览器支持) - 注意:
replaceState不会触发popstate,pushState会(当用户点后退时) - 如果服务端不支持该路径,用户刷新页面会 404——这是前端路由必须配套服务端配置的原因
真正麻烦的从来不是“怎么改 URL 字符串”,而是改完之后要不要影响历史栈、要不要响应后退、服务端能否兜底。这些决策比调用哪个 API 更关键。










