關於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加載到頁面。

而後再次測試，發現完美解決問題。