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