Vue3中路由跳转之后删除携带的query参数

场景

今天在开发时遇到一个需求，需要页面跳转后，将路由携带的参数输入搜索框进行筛选，筛选条件回显后产生了一个问题，刷新页面筛选条件会一致存在，因为在页面挂载时将路由上的query参数赋值给了筛选条件，需求其实只需要第一次跳转时携带条件即可。这时候我打开百度查询，很轻易的写出了下面一段有毒的代码。

onMounted(){const query = route.queryform[key] = query[key]delete query[key] // key为要删除的路由参数router.replace({query})
}

然后就是保存，页面跳转，刷新。什么情况，路由参数为什么还在，于是在delete语句下面添加打印语句

...
console.log(query) // {} query上的参数确实是删除了

然后就是继续百度，搜出来的结果跳转都是使用的router.push跳转的页面,我这儿使用的是window.open打开新的页面，重试了几次，还是没能删除路由参数。思考了一下，觉得一定是window.open的问题，于是换了一种实现方式，使用localStorage携带参数，新页面接收到参数后再删除localStorage中的数据。测试了一下，很完美，没有任何问题，提代码，然后就被打回来了，不能滥用localStorage。继续百度，发现别人用的都是delete query[key]。对比一下发现了问题,问题出在query参数的定义上，其他文章用的都是解构赋值，而不是直接将route.query直接赋值，修改后果然删除了路由参数。

const query = {...route.query} // 这儿一定不能直接赋值

仔细一想也是这个道理，query是一个对象，直接进行赋值是对象的浅拷贝，删除query上的参数，route.query上仍然存在，而解构赋值虽然不是深拷贝，但是结构赋值在进行一维数组或对象时，其本质是对基本数据类型进行等号赋值，可以看做是深拷贝。所以使用router.repalce({query})能够删除路由携带的参数，因为query上已删除了。