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

Posted mr_raptor

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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,记录分页信息,返回到上次的分页的主要内容,如果未能解决你的问题,请参考以下文章

Vue和ElmentUI实现订单信息的分页操作

thinkphp分页时把后一页记录全部删除,如何返回上一页

oracle的分页处理,oracle中针对一个一千条记录的表如果要查200到300的记录怎么查

TypeORM/NestJS 中的分页

UserList.vue组件中用钩子函数初始化第一页的分页数据

采用Vue2.0开发的分页js组件