Javascript 在不重新加载的情况下更改查询参数

在网页中，查询参数是指在URL中用来传递参数的部分，通常是以?开始的一串字符，比如：

https://example.com/search?q=javascript&page=2

其中，?后面就是查询参数，q=javascript表示搜索关键词是javascript，page=2表示当前页码是2。

当我们需要在网页中更改查询参数时，如果直接修改URL，那么将会重新加载页面，这显然不是我们想要的。那么，有没有一种方式可以在不重新加载的情况下更改查询参数呢？答案是肯定的，下面我们来介绍两种方法：

方法一：使用URLSearchParams

URLSearchParams是一个用来处理URL查询参数的API，可以方便地增删改查查询参数。

// 获取当前URL中的查询参数
const searchParams = new URLSearchParams(window.location.search);

// 更改某个查询参数
searchParams.set('q', 'react');

// 获取某个查询参数
const q = searchParams.get('q');

// 删除某个查询参数
searchParams.delete('page');

// 添加一个新的查询参数
searchParams.append('sort', 'recent');

// 生成新的URL，但不加载页面
window.history.replaceState({}, '', `${window.location.pathname}?${searchParams.toString()}`);

在上面的代码中，我们先使用new URLSearchParams(window.location.search)获取当前URL的查询参数，然后使用set()更改q查询参数的值，使用delete()删除page查询参数，使用append()添加一个新的sort查询参数，并最终使用history.replaceState()方法生成新的URL，但不加载页面。

需要注意的是，history.replaceState()方法的第三个参数为完整的URL，需要手动拼接上?和查询参数字符串。另外，history对象的replaceState()方法和pushState()方法用来修改浏览器历史记录，但不会重新加载页面。

方法二：使用URL和URLSearchParams

和方法一类似，我们也可以使用URL和URLSearchParams来更改查询参数。

// 获取当前URL
const url = new URL(window.location);

// 获取URL的查询参数
const searchParams = url.searchParams;

// 更改某个查询参数
searchParams.set('q', 'vue');

// 获取某个查询参数
const q = searchParams.get('q');

// 删除某个查询参数
searchParams.delete('page');

// 添加一个新的查询参数
searchParams.append('sort', 'popular');

// 生成新的URL，但不加载页面
url.search = searchParams.toString();
window.history.replaceState({}, '', url);

在上面的代码中，我们先使用new URL(window.location)获取当前URL，然后使用searchParams属性获取URL的查询参数，接着使用set()、delete()、append()等方法修改查询参数，最后重新赋值给url.search，并使用history.replaceState()方法生成新的URL，但不加载页面。

需要注意的是，URL和URLSearchParams可能不兼容一些老版本的浏览器，需要进行兼容性处理。

以上就是在不重新加载的情况下更改查询参数的两种方法，可以根据实际需求选择其中一种来使用。