為什麼要有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，但瀏覽器不會即向後端傳送請求。

因此可以說，hash模式和histoury模式都是屬於瀏覽器自身的特性，Vue-Router只是利用了這兩個特性（通過呼叫瀏覽器提供的介面）來實現前端路由

使用場景

一般情景下，hash和histoury都可以，除非你更在意顏值，#

呼叫history.pushState()相比於直接修改hash，存在以下優勢：

1：pushState()設定的新URL可以是與當前URL同源的任意URL；而hash只可修改#後面的部分，因此只能設定與當前URL同文檔的URL；

2：pushState()設定的新URL可以與當前URL一模一樣，這樣也會把記錄新增到棧中；而hash設定的新值必須與原來不一樣才會觸發動作將記錄新增到棧中；

3：pushState()

4：pushState()可額外設定title屬性供後續使用。

當然history也不是樣樣都好。SPA雖然在瀏覽器裡遊刃有餘，單真要通過URL向後端發起HTTP請求時，兩者的差異就來了。尤其在使用者手動輸入URL後回車，或者重新整理（重啟）瀏覽器的時候。

1：hash 模式下，僅hash符號之前的內容會被包含在請求中，如http://www.abc.com,因此對於後端來說，即使沒有做到對路由的全覆蓋，也不會返回404錯誤。

2：history模式下，前端的URL必須和實際向後端發起請求的URL一致。如htttp://www.abc.com/book/id。如果後端缺少對/book/id 的路由處理，將返回404錯誤、