如上图所示的操作,使用element-UI的el-pagination插件来做分页。
核心代码如下
<el-pagination
@current-change="nextPage"
layout="prev, pager, next"
:current-page="current.page"
:total="pageInfo.dataCount">
</el-pagination>
mounted() {
console.log("it is mounted")
this.currentPage = Number(localStorage.getItem('pagination')) || 1;
this.nextPage(this.currentPage);
},
beforeUpdate () {
localStorage.setItem('pagination', this.currentPage);
console.log("it is beforeUpdate",localStorage.getItem('pagination'))
},
beforeDestroy () {
console.log("it is beforeDestroy")
localStorage.setItem('pagination', '1');
}
注意:
1,在触发二级路由的时候,原组件不会被销毁,只会被更新。返回到二级路由的时候,组件再次更新,所以使用mounted钩子函数,而不是created函数来进行page的跳转操作。
2,localStorage中getItem方法取到的page是string类型,需要转为number