关于vue+element-ui项目的分页，返回默认显示第一页的问题解决

 

关于vue+element-ui项目的分页，返回默认显示第一页的问题解决

 

 

问题描述

当前页面以下：

而后点击页码跳到第3页，而后在第三页点击页面连接跳转到新的页面

而后在新页面点击返回按钮，返回到当前页，结果页面分页显示第一页，对应页面内容也是第一页

指望效果

重新页面返回的时候，页码和页面内容仍旧保持在跳转离开前的样子。

解决办法

1.利用localStorage或者sessionStorage将跳转页面前的currentPage存储起来，而后，再次返回当前页的时候，在created生命周期里，获取到存储的currentPage，再进行加载
2.代码解释
我这里用的是sessionStorage，关于sessionStorage的使用，我这边先作下解释，以避免后面看不懂。以前开发的时候我是先在全局定义了两个sessionStorage的方法，用于存取值

分页代码

 

而后将currentPage在每次点击页码的时候存到sessionStorage里

这里解释下，qryTableData()是我定义的请求接口交易，刷新页面内容的方法。
而后在当前页的created生命周期里从sessionStorage里面取currentPage。

 

这样，咱们再返回当前页的时候，页面内容将会是跳转离开前的样子。

可是至此工做仅仅完成一半，由于咱们发现这个bug并无彻底解决

问题形成缘由
咱们返回当前页面取得总条数totalNum的以前，element-ui的分页组件已经在页面加载完毕，当时的totalNum绑定的是data里面初始化的数据0，因此当总条数为0的时候，分页组件的页码默认为1。而且当totalNum在created生命周期里取得数据后，分页组件也不会刷新。因此这就致使， 页面内容正确，可是页码高亮依旧是第一页
解决办法
咱们须要在created以后刷新这个分页组件或者让分页组件的html后于created以后加载到页面。
再次刷新这个分页组件是不现实的，咱们选择在created以后加载分页组件。具体办法就是使用v-if。在totalNum不为data里面给的初始值0的时候，才让这段html加载到页面。

而后再次测试，发现完美解决问题。