在前端开发中，有时候需要在刷新页面时去掉 URL 中的查询参数。本文将介绍两种常见的方法来实现这一目标。
方法一：使用 location.href 和 location.reload()
第一种方法是使用 location.href 和 location.reload() 的组合。具体来说，我们可以通过修改 location.href 来去除查询参数，然后调用 location.reload() 方法来刷新页面。示例代码如下：
// 获取当前 URL const url = new URL(window.location.href); // 去除查询参数 url.search = ''; // 刷新页面 window.location.href = url.toString();
在这个示例中，我们首先获取了当前的 URL，并使用 URL 构造函数将其转换为一个可操作的对象。接着，我们将 search 属性设置为空字符串，这样就可以去掉所有的查询参数。最后，我们使用 toString() 方法将修改后的 URL 转换回字符串，并将其赋值给 location.href。页面会自动刷新，因为我们在最后一步中调用了 location.reload() 方法。
需要注意的是，这种方法会导致页面刷新两次。第一次是由于 window.location.href 的修改，第二次是由于 location.reload() 的调用。因此，如果你想要避免页面闪烁，可以尝试第二种方法。
方法二：使用 HTML5 History API
第二种方法是使用 HTML5 History API。这个 API 提供了一些用于管理浏览历史记录的方法，其中包括 history.replaceState() 方法。我们可以使用这个方法来修改当前页面的 URL，去除其中的查询参数。示例代码如下：
// 获取当前 URL
const url = new URL(window.location.href);
// 去除查询参数
url.search = '';
// 使用 HTML5 History API 替换当前 URL
window.history.replaceState({}, '', url.toString());在这个示例中，我们同样是先获取当前的 URL，并去除其中的查询参数。然后，我们使用 history.replaceState() 方法将修改后的 URL 替换为当前的 URL。这样就可以达到刷新页面并去除查询参数的效果，而且只会刷新一次。
需要注意的是，HTML5 History API 只能在支持 HTML5 的浏览器中使用。如果你需要兼容旧版浏览器，建议使用第一种方法。
总结
本文介绍了两种常见的方法来刷新页面并去除查询参数。如果你想要避免页面闪烁，可以使用 HTML5 History API；如果你需要兼容旧版浏览器，可以使用 location.href 和 location.reload() 的组合。希望这篇文章对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/30417