vue-router的hash模式和history模式,

hash模式背後的原理是onhashchange事件,能夠在window對象上監聽這個事件:javascript

window.onhashchange = function(event){ console.log(event.oldURL, event.newURL); let hash = location.hash.slice(1); document.body.style.color = hash; }
上面的代碼能夠經過改變hash來改變頁面字體顏色,雖然沒什麼用,可是必定程度上說明了原理。
更關鍵的一點是,由於hash發生變化的url都會被瀏覽器記錄下來,從而你會發現瀏覽器的前進後退均可以用了,同時點擊後退時,頁面字體顏色也會發生變化。這樣一來,儘管瀏覽器沒有請求服務器,可是頁面狀態和url一一關聯起來,後來人們給它起了一個霸氣的名字叫前端路由,成爲了單頁應用標配。

隨着history api的到來,前端路由開始進化了,前面的hashchange,你只能改變#後面的url片斷,而history api則給了前端徹底的自由前端

history api能夠分爲兩大部分,切換和修改,參考MDN,切換歷史狀態包括back、forward、gojava

三個方法,對應瀏覽器的前進,後退,跳轉操做,有同窗說了,(谷歌)瀏覽器只有前進和後退,沒有跳轉,嗯,在前進後退上長按鼠標,會出來全部當前窗口的歷史記錄,從而能夠跳轉(也許叫跳更合適):後端



history.go(-2);//後退兩次 history.go(2);//前進兩次 history.back(); //後退 hsitory.forward(); //前進
修改歷史狀態包括了pushState,replaceState

兩個方法,這兩個方法接收三個參數:stateObj,title,urlapi

history.pushState({color:'red'}, 'red', 'red') history.back(); setTimeout(function(){ history.forward(); },0) window.onpopstate = function(event){ console.log(event.state) if(event.state && event.state.color === 'red'){ document.body.style.color = 'red'; } } 

經過pushstate把頁面的狀態保存在state對象中,當頁面的url再變回這個url時,能夠經過event.state取到這個state對象,從而能夠對頁面狀態進行還原,這裏的頁面狀態就是頁面字體顏色,其實滾動條的位置,閱讀進度,組件的開關的這些頁面狀態均可以存儲到state的裏面。瀏覽器

history模式的問題

經過history api,咱們丟掉了醜陋的#,可是它也有個問題:不怕前進,不怕後退,就怕刷新f5,(若是後端沒有準備的話),由於刷新是實實在在地去請求服務器的,不玩虛的。
在hash模式下,前端路由修改的是#中的信息,而瀏覽器請求時是不帶它玩的,因此沒有問題.可是在history下,你能夠自由的修改path,當刷新時,若是服務器中沒有相應的響應或者資源,會分分鐘刷出一個404來。服務器

相關文章
相關標籤/搜索