關於vue+element-ui項目的分頁，返回默認顯示第一頁的問題解決

問題描述

當前頁面以下

而後點擊頁碼跳到第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的坑🙂