问题场景
列表页面输入查询条件，选择第3页，点击详情进入详情页，从详情页返回时，默认列表页面页码重置为1；此时想要缓存该页码，有两种方式；可按业务场景使用
方式一：用vue自带的 keep-alive组件
官方链接：keep-alive
该方式会缓存组件，组件中其他状态也会被缓存；若只想缓存分页组件，用方式二。
被缓存的组件生命周期不再有mounted，与之替代的是activated。当被缓存的列表页面有状态改变时，可以在activated生命周期中调用更新数据方法；例如从列表页面对这条数据有一些操作：审批，撤回，明细，修改等。当一条数据点击审批进入审批页面并提交审批后返回到列表页面审批操作需要更新为撤回操作，此时由于页面被缓存则需要在activated生命周期中调用更新数据方法。
<keep-alive :include="list"> <route-view></route-view> </keep-alive> data(){ return { list:[ 'componesName',//需要缓存页面组件的name ] } }
activated(){
this.init()
}
方式二：修改分页组件的 internalCurrentPage
从列表页进入详情页时保存当前选中的页码
detail (){ sessionStorage.setItem('currentPage') = this.currentPage }
返回至列表页时如下，需要注意的是分页组件本来是 :current-page.sync 我这里去掉了 .sync，不去掉修改internalCurrentPage不生效。
<el-pagination ref="pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[100, 200, 300, 400]" :page-size="100" layout="sizes, prev, pager, next" :total="1000"> </el-pagination> //关键代码 mounted(){ this.currentPage = sessionStorage.getItem('currenPage') || 1； }, methods:{ async getList(){ //.....获取列表数据之后 this.nextTick(() =>{ this.$refs.pagination.internalCurrentPage = this.currentPage
})
}
}
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/159675.html
