列表進入詳情返回列表時保存搜索條件

第一種通過函數解決

1、寫幾個函數，寫好後列表頁面中引用

sStore就是封裝後的sessionStorage,this.params是搜索條件，isFrom配置在列表，isDetail配置在詳情

列表中這樣引入使用如下圖

import { searchParamsSave } from "js/common.js";

function searchParamsSave() {
    return {
        created() {
            let key = 'searchParams';
            let params = sStore.get(key);
            if (params) {
                this.params = params;
            }
            window.onunload = () => {
                sStore.remove(key);
            };
        },
        beforeDestroy() {
            let key = 'searchParams';
            sStore.set(key, this.params);
        },
        beforeRouteEnter(to, from, next) {
            let key = 'searchParams';
            let { isFrom } = to.meta
            let { isDetail } = from.meta;
            if (!isDetail||!isFrom||isFrom!=isDetail) {
                sStore.remove(key);
            }
            next();
        }
    };
}

2、路由裏配置

        {
            path: '',
            component: drugAuditIndex,
            meta: {
                title: '列表',
                isFrom: 'drugAuditDetail'
            },
        }, {
            path: 'drugAuditDetail',
            component: drugAuditDetail,
            meta: {
                title: '詳情',
                isDetail: 'drugAuditDetail',
            },
        }

第二種通過混入解決

路由配置還是一樣

var searchParamsSave = {
    created() {
        let key = 'searchParams';
        let params = sStore.get(key);
        if (params) {
            this.params = params;
        }
        window.onunload = () => {
            sStore.remove(key);
        };
    },
    beforeDestroy() {
        let key = 'searchParams';
        sStore.set(key, this.params);
    },
    beforeRouteEnter(to, from, next) {
        let key = 'searchParams';
        let { isFrom } = to.meta
        let { isDetail } = from.meta;
        if (!isDetail||!isFrom||isFrom!=isDetail) {
            sStore.remove(key);
        }
        next();
    }
}

其次頁面中引用

import { searchParamsSave } from "js/common.js";

mixins: [searchParamsSave],

第三種就是使用keep-alive，配合路由做頁面緩存（這個是比較常見的百度一下別的博客都有的）