VUE+Element+bus 带参数返回上一页 列表分页器页数根据反回的页数变化

能不用bus尽量别用 （有注释的可以）用router跳转然后用beforeRouteEnter接收路径和参数再用router跳转回去。
昨天项目中增加一个功能 点击列表中的按钮跳转到详情页再返回时数据总是在第一页，交给我来修改，思路就是路由带参跳转，再带参返回，但是返回上一页的功能是不能带参数的，然后我就在百度上找到了bus。

import Vue from 'vue'
var busData = new Vue({});
export default busData;

用法就是在需要传递的页面调用$emit方法 和$on 方法,在列表页面取出数据并清除

详情页：

//详情页--点击列表跳转过去的那个页面
import bus from '@/utils/bus'

mounted(){
 bus.$on('page', function (data) {
      bus.page = data
    })
},
methods:{
//返回上一页
    back() {
      bus.$emit('page', this.$route.params.page)
      this.$router.go(-1)
    },
}

列表页

import bus from '@/utils/bus'
created(){
    if (bus.page) {
      this.pageShow = false 
      this.currentPage = bus.page // 页码
      this.getData('mounted')
        // 控制分页重新展示
      this.$nextTick(() => {
        this.pageShow = true
      })
    }
    if (!bus.page) {
      this.getData('created')
    }
},
  beforeDestroy() {
  //页面离开时将bus里的页码重新赋值 不然刷新或者从别的页面回来还是跳转时的页码
    bus.$emit('page', 1)
    bus.$on('page', (data) => {
      bus.page = data
    })
  },

bus也可以在 main.js 里引入 全局使用 不会整的百度就行了

这些完成之后发现 列表的数据变了 但是页码还显示第一页然后就怎么解决 终于在百度上找的了这个博客

element的分页查询后页面数据变了，分页却没变的问题-CSDN博客

知道怎么解决之后就开始比葫芦画瓢

     <el-pagination background
                         layout="total, sizes, prev, pager, next, jumper"
                         :total="total"
                         :current-page="currentPage"
                         @size-change="handleSizeChange"
                         @current-change="handleCurrentChange"
                         v-if="pageShow" />

:current-page="currentPage" 这里是重点

data(){
    return {
     currentPage: 1,
     pageShow: true, // 页码展示
    }
},
 mounted() {
    if (bus.page) {
      this.pageShow = false
      this.currentPage = bus.page
      this.getData()
      bus.$off('page')
      this.$nextTick(() => {
        this.pageShow = true
      })
    }
  },

然后就解决了。接着改bug