vue3.0+element plus 实现使用分页功能页面刷新后维持页面不变

说明：案例只有分页栏，没有数据。实现的效果体现在分页栏页码的变化上。

构建分页

在element plus挑选一个分页组件，创建test页面

<template>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-sizes="[100, 200, 300, 400]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="400">
    </el-pagination>
</template>

<script>
  export default {
    methods: {
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      }
    },
    data() {
      return {
      };
    }
  }
</script>

页面展示

点击页码可以实现页面切换。如果点击浏览器的刷新页面按钮，页码并不会维持在当前页面，而是会切换到首页。我们要实现的功能就是浏览器刷新后让当前页面刷新并且不会切换到首页。

修改代码

<template>
  <el-pagination
    @current-change="handleCurrentChange"
    :current-page="currentPage"
    :page-sizes="[10]"
    :page-size="pagesize"
    layout="total, sizes, prev, pager, next, jumper"
    :total="total"
  >
  </el-pagination>
</template>

<script>

export default {
  data() {
    return {
      total: 120, // 总共多少数据
      currentPage: 1, // 当前页
      pagesize: 10, // 当前页显示多少条
    };
  },
  created() {
    this.Info()
  },
  methods: {
    Info(val) {
      // 用来判断页面是否被刷新
      if (!val) {
        this.currentPage = this.$route.query.page;
        val = this.$route.query.page ? this.$route.query.page : 1;
      }
      const page = parseInt(val) - 1;
      console.log(page)
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.$router.replace({
        path: this.$route.path,
        query: {
          page: this.currentPage,
        },
      });
      this.Info(val);
    },
  },
};
</script>

最终效果