当前位置: 首页 > news >正文

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上已删除了。


http://www.mrgr.cn/news/81287.html

相关文章:

  • 预览和下载 (pc和微信小程序)
  • 基础组件:
  • 探索未来编程:仓颉语言的优雅设计与无限可能
  • 洛谷【贪心算法】P1803 学习笔记
  • UE5 猎户座漂浮小岛 12 技能 瞬移 重力控制
  • 社区版 IDEA 开发webapp 配置tomcat
  • 蓝牙协议——音乐启停控制
  • 深入理解批量归一化(BN):原理、缺陷与跨小批量归一化(CBN)
  • 类设计者的核查表
  • 耗时半月,终于把牛客网上的软件测试面试八股文整理成了PDF合集(测试基础+linux+MySQL+接口测试+自动化测试+测试框架+jmeter测试+测试开发)
  • shiro权限校验demo
  • 高并发处理 --- Caffeine内存缓存库
  • 图解JVM整体结构、执行流程以及2种架构模型,你学会了吗?
  • 绕组识别标签规范
  • 【基于rust-wasm的前端页面转pdf组件和示例】
  • 蓝牙协议——音量控制
  • Django 管理命令中使用 `logging` 和 输出样式
  • 只谈C++11新特性 - 显式虚函数重写
  • docker 安装minio
  • es 中使用update 、create 、index的区别
  • MQTT协议在树莓派上的安全性和性能测试及其在物联网应用中的应用
  • Dubbo 3.x源码(28)—Dubbo服务发布导出源码(7)应用级服务接口元数据发布
  • 物理层知识要点
  • 论如何优雅地“扒“C代码的底裤 - 白盒审计笔记
  • JWT的生成和工作原理
  • 跟踪方案和小语法