vue刷新页面时保持当前分页不变(使用本地存储保存页码)

发布时间 2023-07-06 16:16:06作者: Ali枝

this.currentPage = 1
原本的代码是在页面构造时直接传入第一页的页码使得页面去读取第一页应有的数据。

 

解决思路:
设置一个变量,用于保存每一次刷新前的页面页码数,页面构造函数里进行判断如果这个变量为空,那么说明是第一次加载页面,页面读取第一页数据。

在需要刷新前将当前页码保存,页面构造时如果这个变量不为空,那么页面读取这个变量并传入handleCurrentChange函数加载对应页码数的数据。

解决:
再修改页码方法里,使用本地存储保存当前页码

changePage(pageIndex) {
      this.pageIndex = pageIndex;
      localStorage.setItem("lastpage", this.pageIndex);
      this.getData();
    },

在初始化进行判断如果这个变量为空,那么说明是第一次加载页面,页面读取第一页数据

created() {
    this.pageIndex = localStorage.getItem("lastpage") || 1;
    this.getData();
}