vue項目實現(xiàn)路由跳轉(zhuǎn)到新頁面,返回舊頁面,保留之前的數(shù)據(jù)記錄(操作代碼)

更新時間：2023年09月06日 11:40:37 作者：哼唧怪~

這篇文章主要介紹了vue項目實現(xiàn)路由跳轉(zhuǎn)到新頁面，返回舊頁面，保留之前的數(shù)據(jù)記錄,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下

以項目里某個頁面為示例。

// 頁面相關(guān)參數(shù)示例
searchParams: {
    projectName: '',// 篩選搜索框參數(shù)
    handlerOrgId: '',// 左側(cè)樹點擊參數(shù)
    pageNum:JSON.parse(sessionStorage.getItem('nowPageData'))?.pageNum || 1,// 頁碼參數(shù)
},

在相關(guān)操作路由跳轉(zhuǎn)時，對當前頁面的參數(shù)進行一個存放處理，此示例將數(shù)據(jù)放在 Session Storage 里面。

// 操作示例：數(shù)據(jù)包含點擊的樹節(jié)點，篩選框的參數(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,
        },
    });
},

返回舊頁面時，判斷Session Storage 里面是否含有當前頁面的參數(shù)緩存

如果有數(shù)據(jù)緩存，在頁面創(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; // 本次示例左側(cè)樹需要高亮選中，其他操作也是如此，
    // 存放數(shù)據(jù)，在掉對應樹接口之后，設置高亮選中或者勾選即可
});
## 數(shù)據(jù)存放之后，清除緩存
sessionStorage.removeItem('nowPageData');

如果列表組件有相應封裝的需要對應修改一下，組件里當前頁數(shù) currentPage:

// 如果this.searchParams.pageNum有值，就取這個值，要么就取默認值

到此這篇關(guān)于vue項目實現(xiàn)路由跳轉(zhuǎn)到新頁面，返回舊頁面，保留之前的數(shù)據(jù)記錄的文章就介紹到這了,更多相關(guān)vue路由跳轉(zhuǎn)到新頁面內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

親自動手實現(xiàn)vue日歷控件
這篇文章主要記錄了親自動手實現(xiàn)vue日歷控件的詳細過程，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2019-06-06
詳解Vue生命周期和MVVM框架
MVVM是Model-View-ViewModel的縮寫，MVVM是一種設計思想，這篇文章主要介紹了Vue生命周期和MVVM框架,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2022-07-07
在 Vue 3 中上傳 KML 文件并在地圖上顯示的實現(xiàn)方法
KML 文件作為一種標準的地理數(shù)據(jù)格式,廣泛應用于地理信息系統(tǒng)（GIS）中,通過 OpenLayers 和 Vue 3 的組合,您可以方便地實現(xiàn)地圖數(shù)據(jù)的可視化和交互,本文介紹在 Vue 3 中上傳 KML 文件并在地圖上顯示的實現(xiàn)方法,感興趣的朋友一起看看吧
2024-12-12
el-form resetFields無效和validate無效的可能原因及解決方法
本文主要介紹了el-form resetFields無效和validate無效的可能原因及解決方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2022-08-08
Vue.js實現(xiàn)多條件篩選、搜索、排序及分頁的表格功能
這篇文章主要為大家詳細介紹了Vue.js實現(xiàn)多條件篩選、搜索、排序及分頁的表格功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-03-03
Vue.js之VNode的使用
這篇文章主要介紹了Vue.js之VNode的使用，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2021-04-04
vue cli 3.0下配置開發(fā)環(huán)境下的sourcemap問題
這篇文章主要介紹了vue cli 3.0下配置開發(fā)環(huán)境下的sourcemap問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-06-06
功能強大的vue.js拖拽組件安裝應用
這篇文章主要為大家介紹了功能強大的vue.js拖拽組件安裝應用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2023-06-06
vue 解決無法對未定義的值,空值或基元值設置反應屬性報錯問題
這篇文章主要介紹了vue 解決無法對未定義的值,空值或基元值設置反應屬性報錯問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-07-07
vue前后端分離如何解決每次請求session都會變的問題
這篇文章主要介紹了vue前后端分離如何解決每次請求session都會變的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-08-08