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