使用element-ui的分页组件刷新后保留在当前页

在使用element-ui的分页组件el-pagination时,有时我们翻页到某一页后刷新,希望刷新之后页面仍然保留在当前页面。
思路如下:
我们可以在element-ui分页组件el-pagination翻页的时候改变url地址栏的参数,获取数据的时候参数再从url地址栏获取。
这样即使页面刷新了也能传递给后台之前的参数,获得之前页面的数据。
代码如下:


//每页大小变化
handleSizeChange(val) {
  this.$router.replace({
    path: this.$route.path,
    query: {
      page: this.$route.query.page ? this.$route.query.page : 1,
      pageSize: val,
    }
  });
  this.getData();
},
//分页页码变化
handleCurrentChange(val) {
  this.$router.replace({
    path: this.$route.path,
    query: {
      page: val,
      pageSize: this.$route.query.pageSize ? this.$route.query.pageSize : 10,
    }
  });
  this.getData();
},
//获取数据
getData(){
  axios.post({
    page: this.$route.query.page ? this.$route.query.page : 1,
    pageSize: this.$route.query.pageSize ? this.$route.query.pageSize : 10,
  }).then((res) => {
    console.log(res)
  }).catch((err) => {
    console.error('获取列表出错');
    console.error(err);
  });
},

你可能感兴趣的:(element-ui)