vue項(xiàng)目實(shí)現(xiàn)路由跳轉(zhuǎn)到新頁面,返回舊頁面,保留之前的數(shù)據(jù)記錄(操作代碼)
更新時(shí)間：2023年09月06日 11:40:37 作者：哼唧怪~
這篇文章主要介紹了vue項(xiàng)目實(shí)現(xiàn)路由跳轉(zhuǎn)到新頁面，返回舊頁面，保留之前的數(shù)據(jù)記錄,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
以項(xiàng)目里某個(gè)頁面為示例。
// 頁面相關(guān)參數(shù)示例
searchParams: {
projectName: '',// 篩選搜索框參數(shù)
handlerOrgId: '',// 左側(cè)樹點(diǎn)擊參數(shù)
pageNum:JSON.parse(sessionStorage.getItem('nowPageData'))?.pageNum || 1,// 頁碼參數(shù)
},在相關(guān)操作路由跳轉(zhuǎn)時(shí)，對當(dāng)前頁面的參數(shù)進(jìn)行一個(gè)存放處理，此示例將數(shù)據(jù)放在 Session Storage 里面。
// 操作示例：數(shù)據(jù)包含點(diǎn)擊的樹節(jié)點(diǎn)，篩選框的參數(shù)，以及選中的列表頁碼
jumpToFormFn(type, id) {
let _data = Object.assign(this.searchParams, {});/
sessionStorage.setItem('nowPageData', JSON.stringify(_data));/這兩行代碼用來往 sessionStorage存數(shù)據(jù)
this.$router.push({
path: 'fieldFundsForm',
query: {
type,
id,
},
});
},返回舊頁面時(shí)，判斷Session Storage 里面是否含有當(dāng)前頁面的參數(shù)緩存
如果有數(shù)據(jù)緩存，在頁面創(chuàng)建時(shí)將參數(shù)賦值給頁面的參數(shù)，
let _obj = JSON.parse(sessionStorage.getItem('nowPageData'));
Object.keys(this.searchParams).forEach((key) => {
this.searchParams[key] = _obj[key] || this.searchParams[key];
this.currentCHeckedId = this.searchParams.handlerOrgId; // 本次示例左側(cè)樹需要高亮選中，其他操作也是如此，
// 存放數(shù)據(jù)，在掉對應(yīng)樹接口之后，設(shè)置高亮選中或者勾選即可
});
## 數(shù)據(jù)存放之后，清除緩存
sessionStorage.removeItem('nowPageData');如果列表組件有相應(yīng)封裝的需要對應(yīng)修改一下，組件里當(dāng)前頁數(shù) currentPage:
// 如果this.searchParams.pageNum有值，就取這個(gè)值，要么就取默認(rèn)值
到此這篇關(guān)于vue項(xiàng)目實(shí)現(xiàn)路由跳轉(zhuǎn)到新頁面，返回舊頁面，保留之前的數(shù)據(jù)記錄的文章就介紹到這了,更多相關(guān)vue路由跳轉(zhuǎn)到新頁面內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了Vue如何配置根目錄@(引用路徑)，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要給大家介紹了基于vue大數(shù)據(jù)表格卡頓問題的完美解決方案，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
關(guān)于vue中element-ui?form或table?lable換行的問題
這篇文章主要介紹了vue中element-ui?form或table?lable換行的問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03
這篇文章主要介紹了vuex中g(shù)etters的基本用法，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
Vue3超詳細(xì)的ref()用法教程(看這一篇就夠了!)
這篇文章主要給大家介紹了關(guān)于Vue3超詳細(xì)的ref()用法的相關(guān)資料,在Vue3中ref函數(shù)不僅可以用于在組件中獲取DOM元素或子組件的引用,還可以直接訪問組件元素本身,需要的朋友可以參考下2023-07-07
今天小編就為大家分享一篇vue slots 組件的組合/分發(fā)實(shí)例，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了vue-i18n實(shí)現(xiàn)中英文切換的方法，文中示例代碼非常詳細(xì)，幫助大家更好的理解和學(xué)習(xí)，感興趣的朋友可以了解下2020-07-07
這篇文章主要為大家介紹了解決threeJS加載obj?gltf模型后顏色太暗的方法示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
這篇文章主要為大家詳細(xì)介紹了vue封裝圖片滑塊驗(yàn)證組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
目前前端最流行的網(wǎng)絡(luò)請求庫還是axios,所以對axios的封裝很有必要,下面這篇文章主要給大家介紹了關(guān)于vue3中封裝Axios請求及在組件中使用的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-04-04