el-pagination分页跳转别的页面之后返回到原来页

项目结构是vue-element-admin为基础
store文件夹module下的demo.js

 const demo = {
  state: {
    listQuery: {
      page: 1, //分页当前页
      size: 10 // 页面条数
    }
  },
  mutations: {
    SET_LISTQUERY: (state, listQuery) => {
      state.listQuery = listQuery
    }
  }
}

在分页页中

<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listQuery.page"
                           :page-sizes="[10,20,30,50]" :page-size="listQuery.size" layout="total, sizes, prev, pager, next, jumper" :total="total"
            v-if="total !== 0">
            </el-pagination>
export default {
  name: 'list',
  data() {
    return {
      total: 0,
      listQuery: {
      }
    }
  },
computed: {
    ...mapState({
      demo: state => state.demo
    })
  },
  created() {
    this.listQuery = this.demo.listQuery  //state中存储的分页数据
    this.getList()
  },
  methods: {
    getList() {
        this.listLoading = true
        this.$store.dispatch('list', this.listQuery).then(response => { 
        this.$store.commit('SET_LISTQUERY', this.listQuery) //将新的分页数据存储到state中
        this.list = response.page
        this.total = response.total
        this.listLoading = false
      })
    }，
    handleSizeChange(val) {
      this.listQuery.limit = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.listQuery.page = val
      this.getList()
    }
  }
}

由于在我们获取总条数之前，分页组件el-pagination已经加载完毕，但初始条数在data中设置的是0，所以默认页面为1，而且总条数在获取数据之后更新了，但是分页组件不会重新渲染当前页码，导致返回到原来页了但是数据是原来页的，但页码确实1。
所以我们需要在页面数据加载之后再加载分页组件，所以我们可以使用v-if判断当总条数total为0的时候不加载分页组件： v-if=“total !== 0”。