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,记录分页信息,返回到上次的分页的主要内容,如果未能解决你的问题,请参考以下文章
oracle的分页处理,oracle中针对一个一千条记录的表如果要查200到300的记录怎么查