关于vue+Element-ui项目分页刷新不停留在当前页码bug解决

问题描述

使用pagination组件进行分页时，
问题一：点击其他页码时刷新浏览器，页码默认跳转回到了第一页并没有停留在当前页码。
问题二：如果你并不是在第一页进行数据搜索分页，那么当你返回当前页，页面数据为离开时的数据，但页码显示为第一页，此时你再次点击刚才的页码，两页数据为一致，出现页码数据重复。

分页bug演示

解决办法

利用localStorage或者sessionStorage将跳转页面前的currentPage存储起来，当再次返回当前页的时候，在created生命周期里，获取到存储的currentPage，再进行加载，从而保持页面的一致性。

代码演示

1. 我这里使用sessionStorage，为了方便使用这里定义了两个全局sessionStorage的方法，用于存取值：

methods: { //请将方法定义在vue的methods里面
    //给sessionStorage存值
    setContextData: function (key, value) {
        if (typeof value == "string") {
            sessionStorage.setItem(key, value);
        } else {
            sessionStorage.setItem(key, JSON.stringify(value));
        }
    },
        // 从sessionStorage取值
        getContextData: function (key) {
            const str = sessionStorage.getItem(key);
            if (typeof str == "string") {
                try {
                    return JSON.parse(str);
                } catch (e) {
                    return str;
                }
            }
            return;
        }
}

2. 页面分页代码

分页

加入v-if="pagination.total != 0是为了防止，取得总条数total之前，element-ui的分页组件先行在页面加载完毕，导致total初始化默认为0，当总条数为0的时候，分页组件的页码默认为1。并且当total在created生命周期里正确取到数据后，分页组件也不会刷新。所以这就导致， 页面内容正确，但是页码高亮依旧是第一页。

3. 分页模型

模型

4. 储存当前页码

存页码

注：this.findPage()，是我项目的分页查询方法，请替换为自己对应分页查询。

4. 在created生命周期里取，存的当前页

取页码

完成效果

修复后