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