vue框架，使用pagination组件进行分页时 分页不在第一页的时候保存了 筛选记录，然后f5刷新又到第一页了，到了onCurrentChange改变分页的函数改变了

问题描述

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

分页bug演示

解决办法

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

 

代码演示

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

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生命周期里取，存的当前页

取页码

完成效果

 

修复后