VUE，记录分页信息，返回到上次的分页

分页，从列表进入详情页后，再返回列表，需要记录下上次的分页

1 创建store

const state = {
  page: 1
}

const mutations = {
  SET_QUERY_PARAMS: (state, page ) => {
    state.page = page
  }
}

const actions = {
  setQueryParams({ commit }, page) {
    commit('SET_QUERY_PARAMS', page)
  }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}

2 在列表页进入详情页时，记录下当前分页信息

  // 保存翻页的信息，返回之后回到上次的页面，比如：修改后的返回
  beforeRouteLeave(to, from, next) {
    // 只有跳转到指定的详情页才记录翻页信息
    if (to.name === 'pageDetail') {
      this.$store.dispatch('queryParams/setQueryParams', this.currentPage);
    } else {
      this.$store.dispatch('queryParams/setQueryParams', 1);
    }
    next()
  },

3 当从详情页返回列表时，从store里读取出上次记录的值

computed: {
    ...mapGetters([
      // 获得翻页信息
      'page'
    ])
 },
 mounted() {
    // 读取store里的上次分页信息
    this.currentPage = this.page;
 },

4 分页信息更新，UI不同步显示当前页

  <el-pagination
    // fix 分页信息更新，UI不同步显示当前页，total表示所有记录数
    v-if="total != 0"
    background
    layout="prev, pager, next"
    :total="total"
    :page-size="limit"
    :current-page.sync="currentPage"
    @current-change="currentChange"
  ></el-pagination>

标签：VUE,分页,翻页,上次,state,详情页,page,store
来源： https://blog.csdn.net/mr_raptor/article/details/112724128