相信學(xué)員在寫項目時都會遇到下面這樣的問題：用vant 的tab去換不同的組件，加載不同的數(shù)據(jù)。點(diǎn)擊的時候，可以跳到對應(yīng)的頁面。然后返回的時候，轉(zhuǎn)跳到之前的狀態(tài)。可是遇到多頁面的應(yīng)用，里面的按鈕則需要轉(zhuǎn)跳其他頁面。

　　遇到上述情況，相信很多學(xué)員想到添加參數(shù)作為區(qū)分，然后依據(jù)參數(shù)做判斷。但是一旦添加參數(shù)，牽扯的修改內(nèi)容也會隨之增加很多。因為其他的部分轉(zhuǎn)跳這個頁面也都需要添加參數(shù)。

　　這個時候，最好的辦法是歷史替換，默認(rèn)打開不作處理，只有tab切換的時候，做pushstate。下面就介紹在HTML5大前端中: history API 的具體用法。

　　(一)js/history

　　可以在不刷新頁面的情況下動態(tài)的修改地址欄中的URL地址，動態(tài)的修改頁面上所顯示的資源。

　　window.history 的方法和屬性

　　方法： back() forward() go()

　　屬性： length

　　//返回

　　window.history.back()

　　window.history.go(-1)

　　//向前跳轉(zhuǎn)

　　window.history.foward()

　　window.history.go(1)

　　//歷史記錄中頁面總數(shù)

　　history.length

　　(二)HTML5 新方法

　　添加和替換歷史記錄的條目

　　pushState

　　history.pushState(state,title,url): 添加一條歷史記錄，不刷新頁面

　　state: 一個于指定網(wǎng)址相關(guān)的狀態(tài)對象，popstate事件觸發(fā)時，該對象會傳入回調(diào)函數(shù)中，如果不需要這個對象，填null

　　title: 新頁面的標(biāo)題，但是大多數(shù)瀏覽器都會忽略這個值，因此，這里可以填入 null

　　url: 新網(wǎng)址，必須是同一個域名

　　history.pushState(null, null,'./demo.html')

　　缺點(diǎn)： 就是瀏覽器在轉(zhuǎn)跳的時候，不會檢查 demo.html 是否存在

　　(三)應(yīng)用--添加 hash 值，頁面只局部加載

　　history.pushState(null, null,'#one')

　　replaceState替換當(dāng)前的歷史記錄，不刷新頁面

　　history.replaceState(state,title,url) 替換當(dāng)前歷史記錄，不刷新頁面

　　history.replaceState(null, null,'?one')

　　(四)事件

　　popstate事件：歷史記錄發(fā)生改變時觸發(fā)，調(diào)用 history.pushState() 或者 history.replaceState()，不會觸發(fā)popstate()事件

　　hashchange事件: 當(dāng)頁面hash值改變的時候，常用于構(gòu)建單頁面的應(yīng)用

　　按照上面的操作，跳轉(zhuǎn)頁面問題就可以完美解決。建議你把上面的解決代碼方案自己從頭到尾敲上幾遍，以此確保真正掌握以及遇到相關(guān)衍生問題能夠觸類旁通。要知道想要成為一名合格優(yōu)秀的程序員，需要積累大量實戰(zhàn)經(jīng)驗，只理解了代碼戰(zhàn)術(shù)是遠(yuǎn)遠(yuǎn)不夠的。

上一篇

千鋒成都校區(qū)老師帶你分析Python受學(xué)員青睞原因

下一篇

千鋒成都校區(qū)老師 帶你解析UI設(shè)計必備技能