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

最新推荐文章于 2023-12-11 15:00:27 发布

原创最新推荐文章于 2023-12-11 15:00:27 发布 · 置顶 · 1.8k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#列表 #详情 #保存搜索条件 #vue

JavaScript 同时被 3 个专栏收录

46 篇文章

订阅专栏

vue

37 篇文章

订阅专栏

es6

17 篇文章

订阅专栏

本文介绍了在前端开发中，如何通过三种不同的方式保存和恢复页面的搜索参数：使用函数、混入(mixins)和结合keep-alive及路由进行页面缓存。这些方法可以帮助开发者在用户浏览不同页面时保持搜索条件的一致性。

第一种通过函数解决

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