不廢話，先上組件文件pages.vue:

<template> <div class="pages-box" v-if="pageTotal > 0">  <ul class="pages">   <li class="pages-prev">    <a v-if="pageNow != 1" href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click="prevClick">上一頁</a>   </li>   <!--如果只有一頁就不顯示固定的第一個分頁按鈕了,避免重復-->   <template v-if="pageTotal > 1">    <li v-for="i in pageBegin" class="pages-li" :class="{active:i == pageNow}">     <span v-if="i == pageNow" v-text="i"></span>     <a v-else href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click="pageClick" v-text="i"></a>    </li>   </template>   <li v-if="ellipsis[0] > slider">    <span>...</span>   </li>   <li v-for="i in pageMiddle" class="pages-li" :class="{active:i == pageNow}">    <span v-if="i == pageNow" v-text="i"></span>    <a v-else href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click="pageClick" v-text="i"></a>   </li>   <li v-if="pageTotal - ellipsis[1] > slider">    <span>...</span>   </li>   <li v-for="i in pageEnd" class="pages-li" :class="{active:i == pageNow}">    <span v-if="i == pageNow" v-text="i"></span>    <a v-else href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click="pageClick" v-text="i"></a>   </li>   <li class="pages-next">    <a v-if="pageNow != pageTotal" href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click="nextClick">下一頁</a>   </li>  </ul> </div></template><script> export default{  name: 'pages',  props: {   //總頁數   total: {    type: [Number, String],    required: true   },   //當前頁   now: {    type: [Number, String],    default: 1   }  },  data() {   return {    //當前頁    pageNow: this.now,    //總頁數    pageTotal: this.total,    //輸入的頁碼    pageNum: "",    //顯示分頁按鈕的個數    length: 8,    //前后固定的分頁按鈕個數    slider: 1   }  },  watch: {   total(val){    let page_total = parseInt(val);    page_total = (isNaN(page_total) || page_total < 1) ? 1 : page_total;    this.pageTotal = page_total;   },   now(val){    let page_now = parseInt(val);    page_now = (isNaN(page_now) || this.pageTotal < 2 || page_now < 1) ? 1 : page_now;    page_now = page_now > this.pageTotal ? this.pageTotal : page_now;    this.pageNow = page_now;   }  },  computed: {   //前邊顯示固定分頁數   pageBegin(){    return Math.min(this.slider, this.ellipsis[0]);   },   //中間顯示分頁數   pageMiddle(){    let arr = [];    for (let i = this.ellipsis[0] + 1; i <= this.ellipsis[1]; i++) {     arr.push(i);    }    return arr;   },   //后邊顯示分頁數   pageEnd(){    let arr = [];    for (let i = this.ellipsis[2] + 1; i <= this.pageTotal; i++) {     arr.push(i);    }    return arr;   },   /**    * 出現三個點時的分頁的范圍    * @returns {*[]}    * begin: 開始頁碼    * end: 結束頁碼    * end_max: 結束頁碼的最大值    */   ellipsis() {    let end_max = this.pageTotal - this.slider;    let begin = this.pageNow - (this.length / 2) + this.slider;    begin = begin < 1 ? 1 : begin;    let end = begin + this.length - 2 * this.slider;    //當begin達到最小值后需要根據begin重新計算end以保證顯示的分頁按鈕個數不變    end = begin < this.slider ? (end + this.slider - begin) : end;    if (end >= end_max) {     end = end_max;     //當end達到最大值后需要根據end重新計算begin以保證顯示的分頁按鈕個數不變     begin = (end - this.length + 2 * this.slider) < 1 ? 1 : (end - this.length + 2 * this.slider);    }    return [begin, end, end_max];   }  },  methods: {   //上一頁   prevClick() {    this.pageNow--;    this.pageNow = this.pageNow < 1 ? 1 : this.pageNow;    this.changePage(this.pageNow);   },   //下一頁   nextClick() {    this.pageNow++;    this.pageNow = this.pageNow > this.pageTotal ? this.pageTotal : this.pageNow;    this.changePage(this.pageNow);   },   //點擊頁碼   pageClick(e) {    this.pageNow = Number(e.target.innerText.trim());    this.changePage(this.pageNow);   },   //輸入頁碼   pageInput(e){    let num = parseInt(e.target.innerText);    if(isNaN(num)){     this.pageNum = '';     e.target.innerText = '';    } else {     this.pageNum = num;     //e.target.innerText = num;    }   },   //跳轉到輸入的頁碼   goClick() {    this.pageNum = this.pageNum < 1 ? 1 : this.pageNum;    this.pageNum = this.pageNum > this.pageTotal ? this.pageTotal : this.pageNum;    this.pageNow = this.pageNum;    this.pageNum = "";    this.changePage(this.pageNow);   },   // 切換分頁   changePage(page){    let {name, params, query} = this.$route;    this.$router.push({     name,     params: Object.assign(params, {page}),     query    });   }  } }</script><style lang="sass" type="text/scss" rel="stylesheet/scss"> @import '../scss/base/variables'; .pages-box{  position: relative;  padding: 5px 10px;  margin: 20px 0;  text-align: center; } .pages{  display: inline-block;  padding: 10px 0;  &:after{   content: "";   display: table;   line-height: 0;   clear: both;  }  li{   float: left;   height: 20px;   line-height: 20px;   text-align: center;   margin: 0 2px;   box-sizing: border-box;   font-size: 13px;   span, a{    display: block;    width: 100%;    height: 100%;    padding: 0 2px;    box-sizing: border-box;   }  }  .pages-li{   min-width: 30px;   border: 1px solid $theme;   color: $theme;   a{    color: $theme;   }   &.active{    span{     background: $theme;     color: #fff;    }   }  }  .pages-prev, .pages-next{   padding: 0 8px;   font-size: 12px;   a{    display: block;    height: 100%;    position: relative;    color: $theme;    &:before{     content: '';     position: absolute;     top: 50%;     display: block;     width: 6px;     height: 6px;margin-top:-4px;     border-left: 1px solid $theme;     border-top: 1px solid $theme;    }   }  }  .pages-prev a{   padding-left: 8px;   &:before{    transform:rotate(-45deg);    left: 0;   }  }  .pages-next a{   padding-right: 8px;   &:before{    transform:rotate(135deg);    right: 0;   }  }  .pages-num{   .num-input{    min-width: 20px;    height: 20px;    padding: 0 5px;    line-height: 20px;    border-radius: 2px;    border: 1px solid $theme;    color: $theme;    text-align: center;    outline: none;   }  }  .pages-go{   a{    color: $theme;   }   span{    color: #666;   }  } }</style>