衆所周知，vue-router有兩種模式，hash模式和history模式，這裏來談談兩者的區別。
hash模式
hash模式背後的原理是onhashchange事件,可以在window對象上監聽這個事件:eg:
//file:///C:/Users/gaosh/Desktop/1.html#red
window.onhashchange = function(event){
console.log(event.oldURL, event.newURL);
let hash = location.hash.slice(1);
console.log(hash);//red
document.body.style.color = hash;
}
上面的代碼可以通過改變hash來改變頁面字體顏色，雖然沒什麼用，但是一定程度上說明了原理。更關鍵的一點是，因爲hash發生變化的url都會被瀏覽器記錄下來，從而你會發現瀏覽器的前進後退都可以用了，同時點擊後退時，頁面字體顏色也會發生變化。這樣一來，儘管瀏覽器沒有請求服務器，但是頁面狀態和url一一關聯起來，後來人們給它起了一個霸氣的名字叫前端路由，成爲了單頁應用標配。
網易雲音樂，百度網盤就採用了hash路由，看起來就是這個樣子:
history路由 :
隨着history api的到來，前端路由開始進化了,前面的hashchange，你只能改變#後面的url片段，而history api則給了前端完全的自由
history api可以分爲兩大部分，切換和修改，參考MDN
切換歷史狀態:
包括back,forward,go三個方法，對應瀏覽器的前進，後退，跳轉操作，有同學說了，(谷歌)瀏覽器只有前進和後退，沒有跳轉，嗯，在前進後退上長按鼠標，會出來所有當前窗口的歷史記錄，從而可以跳轉(也許叫跳更合適)：
history.go(-2);//後退兩次
history.go(2);//前進兩次
history.back(); //後退
hsitory.forward(); //前進
通過pushstate把頁面的狀態保存在state對象中，當頁面的url再變回這個url時，可以通過event.state取到這個state對象，從而可以對頁面狀態進行還原，這裏的頁面狀態就是頁面字體顏色，其實滾動條的位置，閱讀進度，組件的開關的這些頁面狀態都可以存儲到state的裏面。
修改歷史狀態 :
包括了pushState,replaceState兩個方法,這兩個方法接收三個參數:stateObj,title,url
h5中history.pushState的用法：
h5中提供了不修改頁面內容只修改地址欄的api，pushState(添加瀏覽歷史),replaceState(修改當前瀏覽歷史)，popState事件在用戶返回或前進進會被出發觸發
history.pushState方法接受三個參數，依次爲：
state：一個與指定網址相關的狀態對象，popstate事件觸發時，該對象會傳入回調函數。如果不需要這個對象，此處可以填null。可用它來傳一些數據
title：新頁面的標題，但是所有瀏覽器目前都忽略這個值，因此這裏可以填null。
url：新的網址，必須與當前頁面處在同一個域。瀏覽器的地址欄將顯示這個網址。
history.replaceState方法跟pushState一樣只不過replaceState是修改當前的狀態
popState的觸發:
僅僅調用pushState方法或replaceState方法 ，並不會觸發該事件，只有用戶點擊瀏覽器倒退按鈕和前進按鈕，或者使用JavaScript調用back、forward、go方法時纔會觸發。另外，該事件只針對同一個文檔，如果瀏覽歷史的切換，導致加載不同的文檔，該事件也不會觸發。此事件可以添加一個回調函數，函數的第一個參數爲事件,事件的state屬性是pushState和replaceState中傳遞的第一個參數state
eg:
let a=1;
document.getElementById('abc').onclick=function(){
window.history.pushState({pageParams:a},null,'?page='+a);
}
//點擊之後地址欄:file:///C:/Users/gaosh/Desktop/1.html?page=1
window.onpopstate = function(event){
console.log(event)
console.log(event.state.pageParams)//1
}
history模式怕啥
通過history api，我們丟掉了醜陋的#，但是它也有個毛病：
不怕前進，不怕後退，就怕刷新，f5，（如果後端沒有準備的話）,因爲刷新是實實在在地去請求服務器的,不玩虛的。
在hash模式下，前端路由修改的是#中的信息，而瀏覽器請求時是不帶它玩的，所以沒有問題.但是在history下，你可以自由的修改path，當刷新時，如果服務器中沒有相應的響應或者資源，會分分鐘刷出一個404來。
所以，如果你想在github.io上搭一個單頁博客，就應該選擇hash模式。比如這個博客