vue.js分页组件(新手学习记录)

先说明页码总数是从接口返回的参数中获取的
页码是自己定义并赋值到url中，获取指定页的数据

首先新建一个page.vue组件
HTML部分，这里用了bootstrap4.0，就不去写样式了

<template>
  <div class="mt-2 font-size-14">
    <nav aria-label="Page navigation example">
      <ul class="pagination justify-content-center">
        <li class="page-item">
          <button type="button" class="page-link" @click="previous">
            <span>&laquo;</span>
          </button>
        </li>
        <li class="page-item">
          <button type="button" class="page-link" @click="first">
            <span>首页</span>
          </button>
        </li>
        <li class="page-item" v-if="tabPage != 1">
          <button type="button" class="page-link border-0 bg-transparent">
            <span>...</span>
          </button>
        </li>
        <li class="page-item" v-for="(page,pIndex) in showPage" :key="pIndex" :class="atPageSon == pIndex+tabPage ? 'active' : ''">
          <button type="button" class="page-link" @click="option(pIndex+tabPage)">
            <span>{{pIndex+tabPage}}</span>
          </button>
        </li>
        <li class="page-item" v-if="tabPage < this.sumPageSon-9">
          <button type="button" class="page-link border-0 bg-transparent">
            <span>...</span>
          </button>
        </li>
        <li class="page-item">
          <button type="button" class="page-link" @click="end">
            <span>尾页</span>
          </button>
        </li>
        <li class="page-item">
          <button type="button" class="page-link" @click="next">
            <span>&raquo;</span>
          </button>
        </li>
        <li class="page-item ml-2">
          <button type="button" class="page-link border-0 bg-transparent">
            <span>共{{sumPageSon}}页</span>
          </button>
        </li>
      </ul>
    </nav>
  </div>
</template>

javascript部分

<script>
export default {
  name: "page",
  data() {
    return {
      atPageSon: this.atPage, //当前页码
      sumPageSon: this.sumPage //总页码
    };
  },
  props: ["atPage", "sumPage"],
  methods: {
    //  上一页
    //  下一页
    //  首页
    //  尾页
    //  选择页
    previous() {
      if (this.atPageSon > 1) {
        this.atPageSon--;
        this.$emit("tabPage", this.atPageSon);
      }
    },
    next() {
      if (this.atPageSon < this.sumPageSon) {
        this.atPageSon++;
        this.$emit("tabPage", this.atPageSon);
      }
    },
    first() {
      this.atPageSon = 1;
      this.$emit("tabPage", this.atPageSon);
    },
    end() {
      this.atPageSon = this.sumPageSon;
      this.$emit("tabPage", this.atPageSon);
    },
    option(page) {
      this.atPageSon = page;
      this.$emit("tabPage", this.atPageSon);
    }
  },
  computed: {
    //  总页数大于10就显示其中10个页码，小于等于10就显示全部页码
    //  计算当前显示哪些页码（主要是为了当两边都有未显示页码的时候，当前页在中间位置，比如第6页的时候，从2开始，11结束，）
    showPage(num) {
      return this.sumPageSon > 10 ? 10 : num.sumPageSon;
    },
    tabPage() {
      return this.sumPageSon > 10
        ? this.atPageSon > 4 && this.atPageSon < this.sumPageSon - 4
          ? this.atPageSon - 4
          : this.atPageSon > 4 && this.atPageSon <= this.sumPageSon
          ? this.sumPageSon - 9
          : 1
        : 1;
    }
  },
  watch: {
    //  监听页码总数
    //  监听路由参数（当前页码数）
    //  因为我的总页码数和当前页码都是父组件传进来的，所以用了watch
    sumPage(num) {
      this.sumPageSon = num;
    },
    atPage(num) {
      this.atPageSon = num;
    }
  }
};
</script>

父组件中

<page :at-page="this.$route.params.page" :sum-page="sumPage" @tabPage="upDate"></page>

<script>
import page from "@/components/page/page";
export default {
  name: "proKind",
  data() {
    return {
      sumPage: null,
    };
  },
  components: {
    page
  },
  methods: {
    // 这里是当监听到分页组件事件的时候，获取传过来的页码直接切换路由，然后守卫获取到页码赋值到接口中请求数据
    upDate(tabPage) {
      this.$router.push({
        name: "proKind",
        params: { name: this.$route.params.name, page: tabPage }
      });
    }
  },
    
  //这里用了一个守卫来举例子，怎么获取数据看具体情况
  beforeRouteUpdate(to, from, next) {
    this.axios
      .post(
        `/api/public/list?type=${to.params.name}&page=${to.params.page}`
      )
      .then(res => {
        next();
      });
  },
};
</script>

写得不是很好，尤其是计算页码处...