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

沙尘暴炒饭2025-04-30 21:29

前言：在页面刷新的时候，路由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.刷新验证功能，在本地里面查看