資訊專欄INFORMATION COLUMN
摘要：問題最近碰到兩個問題從首頁進入列表頁之后，點擊下一頁的時候，使用請求更新數(shù)據(jù)，然后點擊瀏覽器后退按鈕就直接返回到首頁，實際這里想要的效果是返回列表頁上一頁。沒法記住之前分頁狀態(tài)。
問題
最近碰到兩個問題：
從首頁進入列表頁之后，點擊下一頁的時候，使用ajax請求更新數(shù)據(jù)，
然后點擊瀏覽器“后退”按鈕就直接返回到首頁，實際這里想要的效果是返回列表頁上一頁。
在列表頁分頁為2的頁面進入詳情頁，然后點擊“后退”按鈕，返回的事列表頁分頁為1的頁面。沒法記住之前分頁狀態(tài)。
優(yōu)化前代碼
代碼如下，在頁數(shù)變化的時候，去異步請求數(shù)據(jù)，渲染頁面。
const currentChange = (currentPage) => {
ajax(`請求地址/${currentPage}`)
.then(renderPage)
}
history
經(jīng)過幾番搜索，發(fā)現(xiàn)可以用History 接口來實現(xiàn)我們想要功能。
history.pushState()按指定的名稱和URL（如果提供該參數(shù)）將數(shù)據(jù)push進會話歷史棧，數(shù)據(jù)被DOM進行不透明處理；你可以指定任何可以被序列化的javascript對象。具體描述可以參考文檔
通過history.pushState(state, title, url)可以修改會話歷史棧，把我們需要保存的數(shù)據(jù)存到state中，這里我們存入一個對象，屬性為當(dāng)前頁數(shù)；title一般沒什么用，這里傳入null；url會修改當(dāng)前歷史紀(jì)錄的地址，瀏覽器在調(diào)用pushState()方法后不會去加載這個URL
假設(shè)當(dāng)前currentPage為1，當(dāng)前url為www.example.com/search/index
...
const pushState = () => {
const url = `/search/index/${currentPage}`
history.push({
page: currentPage
}, null, url)
}
const currentChange = (currentPage) => {
ajax(`請求地址/${currentPage}`)
.then(res =>{
pushState(currentPage)
renderPage()
})
}
...
現(xiàn)在代碼執(zhí)行順序是：頁數(shù)改變 => ajax請求 => pushState => renderPage()
在pushState之后當(dāng)前url變成www.example.com/search/index/1
現(xiàn)在我們通過history.pushState()方法把狀態(tài)存入歷史會話中了，接下來就要監(jiān)聽window.onpopstate事件
參考mdn文檔window.onpopstate每當(dāng)處于激活狀態(tài)的歷史記錄條目發(fā)生變化時,popstate事件就會在對應(yīng)window對象上觸發(fā).
調(diào)用history.pushState()或者history.replaceState()不會觸發(fā)popstate事件. popstate事件只會在瀏覽器某些行為下觸發(fā), 比如點擊后退、前進按鈕(或者在JavaScript中調(diào)用history.back()、history.forward()、history.go()方法).
接下來監(jiān)聽這個事件
window.addEventListener("popstate", (event) => {
if(event.state !== null){
page = event.state.page
changeCurrentPage(page) // 修改當(dāng)前頁數(shù)
}
})
當(dāng)popstate觸發(fā)時，會修改當(dāng)前頁數(shù)，然后觸發(fā)之前定義的currentChange方法，更新數(shù)據(jù)，渲染頁面。
問題2到此為止，問題1就解決了。
接下來要解決問題二：從詳情頁返回列表頁，記住之前的狀態(tài)
這里我用url來記錄狀態(tài)，之前pushState推入的url就派上用場了。
只要把進入頁面首次請求的地址改成當(dāng)前url就可以了
假設(shè)之前push的url為www.example.com/search/index/5，從詳情頁返回之后url還會顯示www.example.com/search/index/5
mounted () {
ajax(location.href)
}
這樣就完成了。
當(dāng)然如果你的狀態(tài)比較復(fù)雜，可以把數(shù)據(jù)存入本地Storage，添加一些判斷即可
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/92587.html
vue 頭條 demo 寫在前面 總結(jié)一下寫 demo 過程中 遇到的一些問題，方便自己的學(xué)習(xí)總結(jié)！如有錯誤，還請指正！ 一直想學(xué)習(xí)使用 vue ，并準(zhǔn)備以后在實際項目使用，之前跟著慕課網(wǎng) 黃軼 老師 敲了一下 餓了么商品購買頁的demoele效果預(yù)覽 該 demo 借鑒自 hcy1996-github 這個項目，但內(nèi)部內(nèi)容，布局風(fēng)格，完全不同，只為共同學(xué)習(xí)，共同交流 數(shù)據(jù)接口 直接打開 今日...
摘要：而唯一不引發(fā)刷新的參數(shù)并不會發(fā)送到服務(wù)器，因此服務(wù)器無法獲得狀態(tài)。目前建議設(shè)置為空字符串。此外請注意，及本身調(diào)用時是不觸發(fā)事件的。我認(rèn)為，按照漸進增強的思路，這樣就是最好的了，也就是只使用較少的代碼優(yōu)化高級瀏覽器的使用體驗。 HTML5 history API有什么用呢？ 從Ajax翻頁的問題說起 請想象你正在看一個視頻下面的評論，在翻到十幾頁的時候，你發(fā)現(xiàn)一個寫得稍長，但非常有趣的評...
摘要：對于那些老網(wǎng)站或者老項目來說全盤改造成并不現(xiàn)實，于是就有了局部頁面刷新這個解決方案。如果不知道局部頁面刷新是何物請看這里，這里和這里。但實際上，第一次后退無法還原的內(nèi)容陷阱，第二次后退頁面刷新了一切恢復(fù)最初的樣子。 ajax在現(xiàn)代網(wǎng)站已經(jīng)得到非常普遍地應(yīng)用，主要的好處大家都知道（異步加載數(shù)據(jù)，不用刷新整個瀏覽器，更小的數(shù)據(jù)傳輸尺寸）。對于那些老網(wǎng)站或者老項目來說全盤改造成ajax并不現(xiàn)...
閱讀 1734·2021-11-22 12:09
閱讀 1462·2019-08-30 13:22
閱讀 2094·2019-08-29 17:00
閱讀 2644·2019-08-29 16:28
閱讀 2956·2019-08-26 13:51
閱讀 1183·2019-08-26 13:25
閱讀 3245·2019-08-26 12:14
閱讀 3015·2019-08-26 12:14
