本文主要是介绍Vue.js结合Element-UI实现分页跳转页面详情返回记住当前点击第几页，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
列表页
mounted
mounted: function() {this.showBlogs();this.getLastPage()
},
methods
getLastPage() { //当从详情页返回的时候，先获取详情页中存下来的detall标识，在列表页中，把获取到的分页页码重新赋值赋值，用以返回前的页面，保持不变if (sessionStorage.getItem('detail')) {// console.log(Number(sessionStorage.getItem("currentPage")));//如果有这个就读取缓存里面的数据this.currentPage = Number(sessionStorage.getItem("currentPage"));} else {this.currentPage = 1;//这个主要是从其他页面第一次进入列表页，清掉缓存里面的数据sessionStorage.removeItem("currentPage");}
},
showBlogs() {this.$http.get('https://www.guanacossj.com/blog/getallarticle/', {_timeout: 5000,onTimeout: (request) = >{this.$message.error(this.$t('common.timeout'));this.loading = false}}).then((response) = >{const res = JSON.parse(response.bodyText);if (res.error_num === 0) {this.loading = false;this.showPagination = true;this.blogList = res['list'];this.totalItems = this.blogList.length;this.handleCurrentChange(this.currentPage)} else {this.$message.error('查询博客列表失败');}})
},在分页的 handleCurrentChange 中，点击切换分页页码，获取当前点击的是第几页：
handleCurrentChange: function(currentPage) {this.currentPage = currentPage;sessionStorage.setItem('currentPage', currentPage);
},分页器
一定要通过v-if判断，如果有数据了不要重新渲染。
我们返回当前页面取得总条数totalItems的之前，element-ui的分页组件已经在页面加载完毕，当时的totalItems绑定的是data里面初始化的数据0，所以当总条数为0的时候，分页组件的页码默认为1。并且当totalItems在created生命周期里取得数据后，分页组件也不会刷新。所以这就导致， 页面内容正确，但是页码高亮依旧是第一页。
<el-pagination v-show="showPagination" background="" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-sizes="[1, 2, 3, 4]" :page-size="pageSize" :total="totalItems"v-if="totalItems !== 0" layout="prev, pager, next, total">
</el-pagination>销毁时
destroyed() {sessionStorage.removeItem("detail");
},
详情页
加载数据时加上
sessionStorage.setItem("detail", true);
这篇关于Vue.js结合Element-UI实现分页跳转页面详情返回记住当前点击第几页的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
