方法一：

直接在页面引入组件

<template>   <div class="page-bar">     <ul>       <li v-if="cur > 1">         <a v-on:click="cur--, pageClick()">{{ LANG.test1.desc152 }}</a>       </li>       <li v-if="cur == 1">         <a class="banclick">{{ LANG.test1.desc152 }}</a>       </li>       <!--当前页背景色为蓝色-->       <li         v-for="index in indexs"         :key="index"         v-bind:class="{ active: cur == index }"       >         <a v-on:click="btnClick(index)">{{ index }}</a>       </li>       <li v-if="cur != all">         <a v-on:click="cur++, pageClick()">{{ LANG.test1.desc153 }}</a>       </li>       <li v-if="cur == all">         <a class="banclick">{{ LANG.test1.desc153 }}</a>       </li>       <li>         <a           >{{ LANG.test1.desc154 }}<i>{{ all }}</i           >{{ LANG.test1.desc155 }}</a         >       </li>     </ul>   </div> </template>
<style lang="less" scoped> .page-bar {   width: 90%;   padding: 1rem;   margin: 0 auto; }
ul, li {   margin: 0rem;   padding: 0rem;
} li {   list-style: none; } .page-bar li:first-child > a {   margin-left: 0rem;
} .page-bar a {   border: 0.01rem solid #ddd;   text-decoration: none;   position: relative;   left: 1%; //  margin-top: 10%;   float: left;   padding: 0.06rem 0.12rem;   // margin-left: -0.01rem;   line-height: 1.42857143;   color: #337ab7;   cursor: pointer; } .page-bar a:hover {   background-color: #eee; } .page-bar a.banclick {   cursor: not-allowed; } .page-bar .active a {   color: #fff;   cursor: default;   background-color: #337ab7;   border-color: #337ab7; } .page-bar i {   font-style: normal;   color: #d44950;   margin: 0rem 0.04rem;   font-size: 0.12rem; } </style>
<script> export default {   props: {     url: ""   },   data() {     return {       all: 10, //总页数       cur:1, //当前页码       totalPage: 0,     };   },   mounted() {     this.dataListFn();   },   methods: {     //请求数据     dataListFn: function (index) {       console.log(this.url, "=================");       this.$axios         .get(this.url, {           params: {             num: 0,             currentPage: this.cur,             // page: index,             // limit: "10",             // state: 0           },         })         .then((res) => {           console.log(res, "==");           if (res.status == 200) {             this.dataList = res.data.data.dataList;             // for (let i = 0; i < res.data.data.dataList.length; i++) {             //   this.dataList.push(res.data.data.dataList[i]);             // }
            console.log(this.dataList, "22");             this.all = res.data.data.totalPage; //总页数             this.cur = res.data.data.currentPage;             this.totalPage = res.data.data.pageSize;             this.$emit('change', this.dataList);             // this.curNum = this.cur;           }           console.log(res);           console.log(res.data.data.totalPage);           console.log(this.all);         });     },     //分页     btnClick: function (data) {       console.log(this.cur, "qq");       //页码点击事件       if (data != this.cur) {         this.cur = data;         console.log(this.data );       }       //根据点击页数请求数据       this.dataListFn(this.cur.toString());     },     pageClick: function () {       //根据点击页数请求数据       this.dataListFn(this.cur.toString());     },   },   computed: {     indexs: function () {       var left = 1;       var right = this.all;       var ar = [];       if (this.all >= 5) {         //这里最大范围从3到6，如果到达7，那么下边加2变成9，已经超过最大的范围值         if (this.cur > 3 && this.cur < this.all - 2) {           //以4为参考基准，左面加2右边加2           left = this.cur - 2;           right = this.cur + 2;         } else {           if (this.cur <= 3) {             left = 1;             right = 5;           } else {             right = this.all;             left = this.all - 4;           }         }       }       while (left <= right) {         ar.push(left);         left++;       }       console.log(ar);       return ar;     },   }, }; </script>   方法二： 多个页面需要分页
①在main.js写 const REQ_URL = { //api地址   petList: "/website/pet",   recently: "/website/recently",   PersonalPet: "/website/PersonalPet" , } Vue.prototype.URL_LIST = REQ_URL; ②页面html引入组件 <Fenye :url="this.URL_LIST.petList" v-on:change="change1"></Fenye> ③在script methods:{ change1(value) {       console.log(value, "aa");       console.log(this.curNum, "num");       console.log(this.dataList, "dataList");       this.dataList = value; // this.curNum = value;//组件传参       console.log("=============");     },