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;
        }
}
  1. 页面分页代码

分页

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

 

  1. 分页模型

模型

  1. 储存当前页码

存页码

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

 

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

取页码

完成效果

 

修复后

posted @ 2022-07-29 10:44  酸suan  阅读(731)  评论(1)  编辑  收藏  举报