先說明頁碼總數是從接口返回的參數中獲取的
頁碼是自己定義并賦值到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: {// 監聽頁碼總數// 監聽路由參數（當前頁碼數）// 因為我的總頁碼數和當前頁碼都是父組件傳進來的，所以用了watchsumPage(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>

寫得不是很好，尤其是計算頁碼處...

總結

以上是生活随笔為你收集整理的vue.js分页组件(新手学习记录)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。