路由的hash和history模式

你的vue-router怎麼實現跳轉？hash 和 history

爲何vue中有這兩種模式

爲了構建 SPA（單頁面應用），須要引入前端路由系統，這也就是 Vue-Router 存在的意義。前端路由的核心，就在於 —— 改變視圖的同時不會向後端發出請求。 爲了達到這種目的，瀏覽器當前提供瞭如下兩種支持：

1. hash——即地址欄 URL 中的 # 符號（此 hash 不是密碼學裏的散列運算）。 好比這個 URL：http://www.abc.com/#/hello，hash 的值爲 #/hello。它的特色在於：hash 雖然出如今 URL 中，但不會被包括在 HTTP 請求中，對後端徹底沒有影響，所以改變 hash 不會從新加載頁面。
2. history —— 利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。（須要特定瀏覽器支持） 這兩個方法應用於瀏覽器的歷史記錄棧，在當前已有的 back、forward、go 的基礎之上，它們提供了對歷史記錄進行修改的功能。只是當它們執行修改時，雖然改變了當前的 URL，但瀏覽器不會當即向後端發送請求。

404錯誤

1. hash模式下，僅hash符號以前的內容會被包含在請求中，如http://www.abc.com，所以對於後端來講，即便沒有作到對路由的全覆蓋，也不會返回404錯誤；
2. history模式下，前端的url必須和後端發起請求的url一致，例如http://www.abc.com/boo/id，若是後端缺乏對book/id的路由處理，就會返回404錯誤。

hash

hash模式的背後是onhashchange事件，能夠在window對象上監聽這個事件：

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關聯在了一塊兒，這就是前端路由。 網易雲和百度網盤就是典型的使用hash的網頁。

history

history包括go(),forward(),back()方法。

history.go(-2);
history.go(2);//前進兩次
history.back();
history.forward();
複製代碼

修改歷史狀態，包括了pushState()和replaceState()兩種方法，這兩個方法接收三個參數，stateObj,title,url。

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

經過pushState方法把頁面狀態保存在state對象中，當頁面的url再變回這個url時，能夠經過event.state取到這個state對象，從而能夠對頁面狀態進行還原，主要是滾動條的位置，閱讀進度，組建的開關等等。

history模式不怕前進不怕後退怕刷新，f5。
刷新是實實在在的去請求後端了。
在hash模式下，前端路由修改的是#中的信息，而瀏覽器請求是不帶他的，因此沒有問題。可是在history模式下你能夠自由的修改path，當刷新時若是沒有相應的的響應或者資源，會分分鐘刷新一個404出來。