資訊專欄INFORMATION COLUMN
摘要：所以這就導(dǎo)致，頁面內(nèi)容正確，但是頁碼高亮依舊是第一頁解決辦法我們需要在之后刷新這個分頁組件或者讓分頁組件的后于之后加載到頁面。然后再次測試，發(fā)現(xiàn)完美解決問題。
問題描述
當(dāng)前頁面如下
然后點(diǎn)擊頁碼跳到第3頁，然后在第三頁點(diǎn)擊頁面鏈接跳轉(zhuǎn)到新的頁面
然后在新頁面點(diǎn)擊返回按鈕，返回到當(dāng)前頁，結(jié)果頁面分頁顯示第一頁，對應(yīng)頁面內(nèi)容也是第一頁
從新頁面返回的時候，頁碼和頁面內(nèi)容仍舊保持在跳轉(zhuǎn)離開前的樣子。
解決辦法 利用localStorage或者sessionStorage將跳轉(zhuǎn)頁面前的currentPage存儲起來，然后，再次返回當(dāng)前頁的時候，在created生命周期里，獲取到存儲的currentPage，再進(jìn)行加載 代碼解釋 我這里用的是sessionStorage，關(guān)于sessionStorage的使用，我這邊先做下解釋，以免后面看不懂。之前開發(fā)的時候我是先在全局定義了兩個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在每次點(diǎn)擊頁碼的時候存到sessionStorage里
這里解釋下，qryTableData()是我定義的請求接口交易，刷新頁面內(nèi)容的方法。
然后在當(dāng)前頁的created生命周期里從sessionStorage里面取currentPage。
這樣，我們再返回當(dāng)前頁的時候，頁面內(nèi)容將會是跳轉(zhuǎn)離開前的樣子。
但是至此工作僅僅完成一半，因?yàn)槲覀儼l(fā)現(xiàn)這個bug并沒有完全解決
問題造成原因
我們返回當(dāng)前頁面取得總條數(shù)totalNum的之前，element-ui的分頁組件已經(jīng)在頁面加載完畢，當(dāng)時的totalNum綁定的是data里面初始化的數(shù)據(jù)0，所以當(dāng)總條數(shù)為0的時候，分頁組件的頁碼默認(rèn)為1。并且當(dāng)totalNum在created生命周期里取得數(shù)據(jù)后，分頁組件也不會刷新。所以這就導(dǎo)致， 頁面內(nèi)容正確，但是頁碼高亮依舊是第一頁
解決辦法
我們需要在created之后刷新這個分頁組件或者讓分頁組件的html后于created之后加載到頁面。
再次刷新這個分頁組件是不現(xiàn)實(shí)的，我們選擇在created之后加載分頁組件。具體辦法就是使用v-if。在totalNum不為data里面給的初始值0的時候，才讓這段html加載到頁面。
然后再次測試，發(fā)現(xiàn)完美解決問題。
后續(xù)：
這里為什么用的是v-if而不是v-show。這就是每個vue初學(xué)者需要明白的事情了，就是v-if和v-show的區(qū)別。嘿嘿
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/108688.html
摘要：初始化項目使用初始化項目安裝項目結(jié)構(gòu)如下接口所有接口對封裝接下來對進(jìn)行封裝，加上中間件實(shí)現(xiàn)類似于攔截器的效果。 Graphql嘗鮮 在只學(xué)習(xí)graphql client端知識的過程中，我們常常需要一個graphql ide來提示graphql語法，以及實(shí)現(xiàn)graphql的server端來進(jìn)行練手。graphql社區(qū)提供了graphiql讓我們使用 graphiql (npm)：一個交互...
摘要：本教程內(nèi)容已過時，更新版教程請訪問博客開發(fā)入門教程。當(dāng)分頁較多時，總是顯示當(dāng)前頁及其前幾頁和后幾頁的頁碼教程中使用的是兩頁，其他頁碼用省略號代替。 本教程內(nèi)容已過時，更新版教程請訪問： django 博客開發(fā)入門教程。 摘要：前兩期教程我們實(shí)現(xiàn)了博客的 Model 部分，以及 Blog 的首頁視圖 IndexView，詳情頁面 DetailView，以及分類頁面 CategoryVi...
摘要：在涉及到組件的分頁功能時，遇到了一點(diǎn)問題。由于數(shù)據(jù)較多，這邊不予展示。返回的數(shù)據(jù)必須是符合要求的數(shù)據(jù)，格式如下必須帶有屬性，屬性值為總共的數(shù)據(jù)條數(shù)，是這一頁的數(shù)據(jù)內(nèi)容，以數(shù)組對象的形式返回。 第一次寫技術(shù)方面的文章，有點(diǎn)忐忑，總怕自己講的不對誤導(dǎo)別人。但是萬事總有個開頭，有不足錯誤之處，請各位讀者老爺指出。 言歸正傳，最近剛進(jìn)新公司，上頭要求我先熟悉熟悉easyui這個組件庫。在涉及到...
摘要：在涉及到組件的分頁功能時，遇到了一點(diǎn)問題。由于數(shù)據(jù)較多，這邊不予展示。返回的數(shù)據(jù)必須是符合要求的數(shù)據(jù)，格式如下必須帶有屬性，屬性值為總共的數(shù)據(jù)條數(shù)，是這一頁的數(shù)據(jù)內(nèi)容，以數(shù)組對象的形式返回。 第一次寫技術(shù)方面的文章，有點(diǎn)忐忑，總怕自己講的不對誤導(dǎo)別人。但是萬事總有個開頭，有不足錯誤之處，請各位讀者老爺指出。 言歸正傳，最近剛進(jìn)新公司，上頭要求我先熟悉熟悉easyui這個組件庫。在涉及到...
閱讀 2320·2021-09-28 09:45
閱讀 3600·2021-09-24 09:48
閱讀 2266·2021-09-22 15:49
閱讀 3101·2021-09-08 16:10
閱讀 1595·2019-08-30 15:54
閱讀 2328·2019-08-30 15:53
閱讀 3024·2019-08-29 18:42
閱讀 2875·2019-08-29 16:19
