前言：在頁面刷新的時候，路由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.刷新驗證功能，在本地里面查看