vue js处理路径上query参数读取后使用后路由上清除该字段,替换当前的浏览器历史记录,而不会导致页面重载,history.replaceState()

vue js处理路径上query参数c读取后路由上清除该字段,替换当前的浏览器历史记录,而不会导致页面重载

要从路径中读取 query 参数 cloudId 并在路由上清除该字段,同时替换当前的浏览器历史记录而不导致页面重载,你可以使用 JavaScript 的 URLSearchParams API 和 history.replaceState() 方法。下面是一个示例代码:

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

// 读取 cloudId 参数的值
const cloudId = queryParams.get('cloudId');

// 清除 cloudId 参数
queryParams.delete('cloudId');

// 生成新的 URL,不包含 cloudId 参数
const newUrl = `${window.location.pathname}?${queryParams.toString()}`;

// 替换当前的浏览器历史记录,不导致页面重载
window.history.replaceState({}, '', newUrl);

在上述示例中,我们首先创建了一个 URLSearchParams 对象来获取当前 URL 中的查询参数。然后,使用 get() 方法获取 cloudId 参数的值,并将其存储在 cloudId 变量中。

接下来,使用 delete() 方法从查询参数中删除 cloudId 参数。然后,使用 toString() 方法将更新后的查询参数转换为字符串。

然后,我们使用 ${window.location.pathname}?${queryParams.toString()} 构建新的 URL,其中 window.location.pathname 表示当前路径。

最后,我们使用 window.history.replaceState() 方法替换当前的浏览器历史记录,将 URL 更新为新的 URL,但不会导致页面重载。

这样做可以清除 cloudId 参数并更新 URL,同时保持页面的状态和内容不变。

希望这个示例对你有所帮助。如有任何进一步的问题,请随时提问。

快速精确地获取location.search中的各个参数值-:通过location.search去获取参数字符串,再进行截取转化获取;通过 new URL();通过 new URLSearchParams() 获取hash中的参数;window.location.search
https://blog.csdn.net/xiaolinlife/article/details/113642938

posted @ 2024-04-12 11:01  yoona-lin  阅读(404)  评论(0编辑  收藏  举报