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>

 

mr_raptor CSDN认证博客专家 精益工程 驱动开发
北京同远天下创始人,专注于企业服务,企业系统解决方案,物联网,智慧社区,产品有众狐邮箱验证www.verify-mail.net,众狐微客服系统,著有《深入浅出嵌入式底层软件开发》北航出版社
已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 代码科技 设计师:Amelia_0503 返回首页