比如当前地址是https://www.baidu.com
,我想追加且不刷新当前页的情况下追加参数a=1和b=2,怎么实现呢?
最后要的结果就是不刷新且存在页面记录的https://www.baidu.com?a=1和b=2
// 获取当前URL
var url = window.location.href;
// 解析URL中的查询参数
var searchParams = new URLSearchParams(url.search);
// 追加或修改查询参数
searchParams.set('a', 1);
searchParams.set('b', 2);
// 更新URL
var newUrl = url.split('?')[0] + '?' + searchParams.toString();
window.history.pushState({}, '', newUrl);
let params = new URLSearchParams(location.search); // 获取当前 URL 中的所有参数
params.set('new_param', 'new_value'); // 添加新参数和对应的值
let newUrl = `${location.pathname}?${params.toString()}`; // 将新参数添加到 URL 中
history.pushState(null, null, newUrl); // 创建新的历史记录项,但不会刷新页面
可以使用 JavaScript 的 window.location 对象来完成此操作。示例代码如下:
// 获取当前 URL
var url = window.location.href;
// 检查 URL 是否已经包含参数
var hasQueryParams = url.indexOf('?') !== -1;
// 构造要追加的参数
var queryParams = 'a=1&b=2';
// 根据是否已经包含参数选择追加方式
if (hasQueryParams) {
// 如果 URL 已经包含参数,则使用 & 符号追加参数
url = url + '&' + queryParams;
} else {
// 如果 URL 不包含参数,则使用 ? 符号追加参数
url = url + '?' + queryParams;
}
// 将 URL 赋值给 window.location,实现页面跳转
window.location = url;
执行上述代码后,页面的 URL 就会变成 https://www.baidu.com/?a=1&b=2%EF%BC%8C%E5%B9%B6%E4%B8%94%E4%B8%8D%E4%BC%9A%E5%88%B7%E6%96%B0%E9%A1%B5%E9%9D%A2%E3%80%82%E8%A6%81%E6%83%B3%E4%BF%9D%E7%95%99%E5%BD%93%E5%89%8D%E9%A1%B5%E9%9D%A2%E7%9A%84%E5%8E%86%E5%8F%B2%E8%AE%B0%E5%BD%95%EF%BC%8C%E5%8F%AF%E4%BB%A5%E4%BD%BF%E7%94%A8 window.history.pushState() 方法来实现,但要注意浏览器兼容性问题