快捷導(dǎo)航

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

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

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

以項(xiàng)目里某個頁面為示例。

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

在相關(guān)操作路由跳轉(zhuǎn)時，對當(dāng)前頁面的參數(shù)進(jìn)行一個存放處理，此示例將數(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,
        },
    });
},

返回舊頁面時，判斷Session Storage 里面是否含有當(dāng)前頁面的參數(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ù)，在掉對應(yīng)樹接口之后，設(shè)置高亮選中或者勾選即可
});
## 數(shù)據(jù)存放之后，清除緩存
sessionStorage.removeItem('nowPageData');

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

// 如果this.searchParams.pageNum有值，就取這個值，要么就取默認(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)文章

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