题目形貌

当前页面以下

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

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

希冀结果

重新页面返回的时刻，页码和页面内容依旧保持在跳转脱离前的模样。

处理办法

应用localStorage或许sessionStorage将跳转页眼前的currentPage存储起来，然后，再次返回当前页的时刻，在created生命周期里，获取到存储的currentPage，再举行加载

代码诠释 我这里用的是sessionStorage，关于sessionStorage的运用，我这边先做下诠释，以避免背面看不懂。之前开辟的时刻我是先在全局定义了两个sessionStorage的要领，用于存取值

//给sessionStorage存值
setContextData: function(key, value) { 
    if(typeof value == "string"){
        sessionStorage.setItem(key, value);
    }else{
        sessionStorage.setItem(key, JSON.stringify(value));
    }
},
// 从sessionStorage取值
getContextData: function(key){
    const str = sessionStorage.getItem(key);
    if( typeof str == "string" ){
        try{
            return JSON.parse(str);
        }catch(e) {
            return str;
        }
    }
    return;
}

分页代码

然后将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加载到页面。

然后再次测试，发明圆满处理题目。

后续：
这里为什么用的是v-if而不是v-show。这就是每一个vue初学者须要邃晓的事变了，就是v-if和v-show的区分。嘿嘿😁

特别感谢@Deguang大神，在他的指导下，才踩出了这个element-ui的坑🙂