一、概念

　　為了構建 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，但瀏覽器不會立即向後端傳送請求。

二、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關聯在了一起，這就是前端路由。

三、history模式

　　隨著history api的到來，前端路由開始進化了,前面的onhashchange，你只能改變#後面的url片段，而history api則給了前端完全的自由。

　　history api可以分為兩大部分，切換和修改。

　　切換歷史狀態包括back、forward、go三個方法，對應瀏覽器的前進，後退，跳轉操作。

　　修改歷史狀態包括了pushState、replaceState兩個方法,這兩個方法接收三個引數:stateObj，title，url

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來。

　　所以呢，你要在服務端增加一個覆蓋所有情況的候選資源：如果 URL 匹配不到任何靜態資源，則應該返回同一個 index.html 頁面，這個頁面就是你 app 依賴的頁面。

　　如果使用nginx，後端配置如下：

location / {
 try_files $uri $uri/ /index.html;
}

以上就是區分vue-router的hash和history模式的詳細內容，更多關於vue-router hash和history模式的資料請關注我們其它相關文章！