history與hash路由的區別

hash前端路由，無刷新

history   會去請求接口

vue-router提供兩種模式的緣由：

vue 是漸進式前端開發框架，爲了實現 SPA ，須要引入前端路由系統（vue-router）。前端路由的核心是：改變視圖的同時不會向後端發出請求。

爲了達到這一目的，瀏覽器提供了 hash 和 history 兩種模式。

1. hash ：hash 雖然出如今 URL 中，但不會被包含在 http 請求中，對後端徹底沒有影響，所以改變 hash 不會從新加載頁面。
2. history ：history 利用了 html5 history interface 中新增的 pushState() 和 replaceState() 方法。這兩個方法應用於瀏覽器記錄棧，在當前已有的 back、forward、go 基礎之上，它們提供了對歷史記錄修改的功能。只是當它們執行修改時，雖然改變了當前的 URL ，但瀏覽器不會當即向後端發送請求。

所以能夠說， hash 模式和 history 模式都屬於瀏覽器自身的屬性，vue-router 只是利用了這兩個特性（經過調用瀏覽器提供的接口）來實現路由。

實現的原理：

1. hash 模式的原理是 onhashchange 事件，能夠在 window 對象上監聽這個事件。
2. history ：hashchange 只能改變 # 後面的代碼片斷，history api （pushState、replaceState、go、back、forward） 則給了前端徹底的自由，經過在window對象上監聽popState()事件。

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.pushState() 比使用 hash 存在的優點：

• pushState 設置的 url 能夠是同源下的任意 url ；而 hash 只能修改 # 後面的部分，所以只能設置當前 url 同文檔的 url
• pushState 設置的新的 url 能夠與當前 url 同樣，這樣也會把記錄添加到棧中；hash 設置的新值不能與原來的同樣，同樣的值不會觸發動做將記錄添加到棧中
• pushState 經過 stateObject 參數能夠將任何數據類型添加到記錄中；hash 只能添加短字符串
• pushState 能夠設置額外的 title 屬性供後續使用

劣勢：

• history 在刷新頁面時，若是服務器中沒有相應的響應或資源，就會出現404。所以，若是 URL 匹配不到任何靜態資源，則應該返回同一個 index.html 頁面，這個頁面就是你 app 依賴的頁面
• hash 模式下，僅 # 以前的內容包含在 http 請求中，對後端來講，即便沒有對路由作到全面覆蓋，也不會報 404

參考：https://blog.csdn.net/majunjie2017/article/details/78507551