从详情页返回列表页保持页码状态

需求

在使用elmenui的el-pagination时，用户从列表页如第二页进入详情页进行操作后，返回列表页时，列表应该显示第二页的内容，而不是第一页。

解决办法

1.使用路由跳转传参存储页码

从列表页跳转到详情页时，将当前页的页码再路由跳转时传递给详情页，再从详情页跳转回列表页时，传递回页码。

        // 从列表页跳转到详情页
        toDetial () {
            this.$router.push({ name: 'Detail', query: { pageNum: this.queryParams.pageNum } });
        },
        
        // 从详情页跳转到列表页 传递回页码
        toList () {
            this.$router.push({ name: 'List', query: { pageNum: this.$route.query.pageNum } });
        },
        
        //在列表页中获取页码
        created () {
            // 当路由参数不存在时 默认取第一页数据
            this.queryParams.pageNum = this.$route.query.pageNum || 1
            // 调用获取列表数据方法
            this.getListData()
        }
复制代码

2.使用vuex存储页码

// 当页码变化时
        handleCurrentChange (val) {
            this.queryParams.pageNum = val;
            // 将当前页数保存到vuex中
            this.$store.commit('currentPage', val);
            this.getList();
        },
        // 从详情页返回时让当前页等于vuex中保存的页码数
        created () {
            this.queryInfo.page = Number(this.$store.state.pageNum) || 1;
            this.getList();
        },
        // 当访问的页面不是详情页时，初始化vuex中保存的当前页信息
        beforeRouteLeave (to, form, next) {
            if (to.name && to.name !== 'Detail') {
                this.$store.state.pageNum = undefined;
            }
            next();
        },
复制代码

另外，还可以使用sessionStorage存储当前页码，与使用vuex方法类似。

如果大家有更好的方法实现，欢迎讨论交流。