未更新url的urlSearchParams

Question

我试图将搜索和页面添加到我的url中，以便在页面上进行搜索和分页。

 const urlParams = new URLSearchParams(window.location.search);
if(!urlParams.has('search'){
   urlParams.append('search', question);
}
if(!urlParams.has('page'){
   urlParams.append('page', pageIndex);
}

这似乎对实际的url没有任何作用。但是当我调用urlParams.toString()时，我可以看到它们已经被添加了，但是它们不在浏览器中的实际url中。

我正在使用Chrome 107，所以它应该支持它。我是不是遗漏了什么？

到目前为止，这些文件对我没有帮助。

Answer 1

当然，它对实际的URL没有任何作用，您正在创建一个URLParameters对象并对其进行更新。你所缺少的是：

window.loacation.search = urlParams.toString()

它将更改浏览器URL中的查询字符串并重新加载页面。

如果您对重新加载页面不感兴趣，可以使用history DOM对象

let url = new URL(window.location.href);
if(!(url.searchParams.has('search'))){
   url.searchParams.append('search', question);
}
if(!(url.searchParams.has('page'))){
   url.searchParams.append('page', pageIndex);
}
history.pushState({},'',url.href);

最后，如果您想无论如何更新page和search参数，可以使用url.searchParams.set()方法，例如：

url.searchParams.set('page', pageIndex);

如果参数不存在，它将追加该参数，并在不引发异常的情况下对其进行更新。

Answer 2

你可以试试这个方法：

首先，检索当前的path。然后，将urlParams附加到检索到的路径，并使用history.pushState()设置新的URL。

const question = "the question";
const pageIndex = 3;

const urlParams = new URLSearchParams(window.location.search);

if (! urlParams.has('search')) {
   urlParams.append('search', question);
}

if (! urlParams.has('page')) {
   urlParams.append('page', pageIndex);
}

const path = window.location.href.split('?')[0];
const newURL = `${path}?${urlParams}`;

history.pushState({}, '', newURL);

资料来源：

• MDN - URLSearchParams
• MDN - History.pushState()
• 获取不带查询字符串的URL