解决vue3 路由query传参刷新后数据丢失的问题

前言:在页面刷新的时候,路由query数据会被清空,网上很多方法说query传参可以实现,反正我是没有实现

思路:将数据保存到本地,通过 " ?" 进行判断是否有数据,页面销毁的时候删除本地的数据

有数据就保存到本地

无数据就获取本地的数据

布置:

1.父组件

const sampleDetailClick = (routerId) => {

router.push({

path: '/informationEntry/specimenDetail',

query: { routerId },

});

};

2.封装公共的处理方法,方便后期使用

export function initRequest(path:any) {

let url = window.location.href.split("?");

if (url[1]) {

localStorage.setItem(url[0], url[1])

const paramsObj = stringToObject(url[1]);

return { isParams: true, paramsObj }

} else{

let params = localStorage.getItem(url[0]) || '';

const newUrl = window.location.origin + window.location.pathname + '?' + params;

window.history.replaceState({}, '', newUrl);

const paramsObj = stringToObject(params);

return { isParams: false, paramsObj }

}

}

引入

复制代码
import { initRequest } from '@/utils/utils.ts'

3.在子组件里面使用

复制代码
import { reactive, ref, onMounted, onBeforeUnmount } from 'vue';
import { initRequest } from '@/utils/utils.ts'
const route = useRoute();
let { id } = route.query;

let currentUrl = window.location.href.split("?");
onMounted(() => {

  const obj = initRequest()
  if (obj) ({ id } = obj.paramsObj);
  openAddModal();  //获取详情
})
onBeforeUnmount(() => { localStorage.removeItem(currentUrl[0]); })

4.刷新验证功能,在本地里面查看

相关推荐
爬虫程序猿12 分钟前
用 Python 给京东商品详情做“全身 CT”——可量产、可扩展的爬虫实战
开发语言·爬虫·python
十一吖i16 分钟前
vue3表格显示隐藏列全屏拖动功能
前端·javascript·vue.js
冰暮流星2 小时前
css之线性渐变
前端·css
徐同保2 小时前
tailwindcss暗色主题切换
开发语言·前端·javascript
mapbar_front2 小时前
大厂精英为何在中小公司水土不服?
前端
蓝纹绿茶2 小时前
bash:**:pip:***python: 错误的解释器: 没有那个文件或目录
开发语言·python·pip
生莫甲鲁浪戴2 小时前
Android Studio新手开发第二十七天
前端·javascript·android studio
云知谷2 小时前
【经典书籍】C++ Primer 第15章类虚函数与多态 “友元、异常和其他高级特性” 精华讲解
c语言·开发语言·c++·软件工程·团队开发
START_GAME3 小时前
深度学习Diffusers:用 DiffusionPipeline 实现图像生成
开发语言·python·深度学习
不爱编程的小九九3 小时前
小九源码-springboot088-宾馆客房管理系统
java·开发语言·spring boot