相信學員在寫項目時都會遇到下面這樣的問題：用vant 的tab去換不同的組件，加載不同的數據。點擊的時候，可以跳到對應的頁面。然后返回的時候，轉跳到之前的狀態。可是遇到多頁面的應用，里面的按鈕則需要轉跳其他頁面。

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

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

　　(一)js/history

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

　　window.history 的方法和屬性

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

　　屬性： length

　　//返回

　　window.history.back()

　　window.history.go(-1)

　　//向前跳轉

　　window.history.foward()

　　window.history.go(1)

　　//歷史記錄中頁面總數

　　history.length

　　(二)HTML5 新方法

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

　　pushState

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

　　state: 一個于指定網址相關的狀態對象，popstate事件觸發時，該對象會傳入回調函數中，如果不需要這個對象，填null

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

　　url: 新網址，必須是同一個域名

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

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

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

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

　　replaceState替換當前的歷史記錄，不刷新頁面

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

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

　　(四)事件

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

　　hashchange事件: 當頁面hash值改變的時候，常用于構建單頁面的應用

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

上一篇

千鋒成都校區老師帶你分析Python受學員青睞原因

下一篇

千鋒成都校區老師 帶你解析UI設計必備技能