列表进入详情返回列表时保存搜索条件

第一种通过函数解决

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，配合路由做页面缓存（这个是比较常见的百度一下别的博客都有的）