一： 什麼是hash 和 history 模式？
hash模式：
hash模式的原理是onhashchange事件，可以通過window物件來監聽該事件
在hash模式下，當url發生變化時，瀏覽器會記錄下來，因此前進後退按鈕都可以使用
因此在該模式下，即使瀏覽器沒有請求伺服器，頁面也會和url一一對應起來，後來人們給它起了乙個霸氣的名字叫前端路由，成為了單頁應用標配。
history模式：
利用h5的 history中新增的兩個api pushstate() 和 replacestate() 和乙個事件onpopstate監聽url變化
如果不想要很醜的hash模式，我們可以使用history模式，當我們使用history模式時，url就像正常的url ---》沒有#
但是如果想要玩這種模式，還需要後台的配置支援，因為我們的應用是個單頁客戶端應用，如果後台沒有正確的配置，當使用者在瀏覽器直接訪問 就會返回 404，這就不好看了。
二、為什麼要有hash和history？
對於 vue 這類漸進式前端開發框架，為了構建 spa（單頁面應用），需要引入前端路由系統，這也就是 vue-router 存在的意義。前端路由的核心，就在於 —— 改變檢視的同時不會向後端發出請求。
為了達到這一目的，瀏覽器當前提供了以下兩種支援：
history —— 利用了 html5 history inte***ce 中新增的 pushstate() 和replacestate() 方法。（需要特定瀏覽器支援）這兩個方法應用於瀏覽器的歷史記錄棧，在當前已有的 back、forward、go 的基礎之上，它們提供了對歷史記錄進行修改的功能。只是當它們執行修改時，雖然改變了當前的 url，但瀏覽器不會立即向後端傳送請求。
因此可以說，hash 模式和 history 模式都屬於瀏覽器自身的特性，vue-router 只是利用了這兩個特性（通過呼叫瀏覽器提供的介面）來實現前端路由。
如何使用history模式：(在vue專案的路由配置`src/router/index.js`裡面配置)
new router()
三、兩者特點：
1. hash 就是指 url 尾巴後的 # 號以及後面的字元，history沒有底帶#，外觀上比hash 模式好看些
2. hash回車重新整理會載入到位址列對應的頁面，history一般就是404掉了
3. hash 能相容到ie8， history 只能相容到 ie10；
4. 由於 hash 值變化不會導致瀏覽器向伺服器發出請求，而且 hash 改變會觸發 hashchange 事件（hashchange只能改變 # 後面的url片段）；
四、使用場景：
一般場景下，hash 和 history 都可以，除非你更在意顏值，# 符號夾雜在 url 裡看起來確實有些不太美麗。
如果不想要很醜的 hash，我們可以用路由的 history 模式，這種模式充分利用 history.pushstate api 來完成
pushstate() 設定的新 url 可以是與當前 url 同源的任意 url；而 hash 只可修改 #後面的部分，因此只能設定與當前 url 同文件的 url；
pushstate() 設定的新 url 可以與當前 url 一模一樣，這樣也會把記錄新增到棧中；而 hash 設定的新值必須與原來不一樣才會觸發動作將記錄新增到棧中；
pushstate() 通過 stateobject 引數可以新增任意型別的資料到記錄中；而 hash只可新增短字串；
pushstate() 可額外設定 title 屬性供後續使用。
當然啦，history 也不是樣樣都好。spa 雖然在瀏覽器裡游刃有餘，但真要通過 url 向後端發起 http 請求時，兩者的差異就來了。尤其在使用者手動輸入 url 後回車，或者重新整理（重啟）瀏覽器的時候。
hash 模式下，僅 hash 符號之前的內容會被包含在請求中，如 因此對於後端來說，即使沒有做到對路由的全覆蓋，也不會返回 404 錯誤。
history 模式下，前端的 url 必須和實際向後端發起請求的 url 一致，如如果後端缺少對 /book/id 的路由處理，
將返回 404 錯誤。vue-router 官網裡如此描述：「不過這種模式要玩好，還需要後台配置支援……所以呢，你要在服務端增加乙個覆蓋所有情況的候選資源：
hash模式和history模式
hash 模式url裡面永遠帶著 號，我們在開發當中 預設使用這個模式 history 模式沒有 號，是個正常的url 適合推廣宣傳 考慮url的規範那麼就需要使用 history模式，因為當然其功能也有區別 history模式還有乙個問題就是，做重新整理操作，會出現404錯誤 那麼就需要和後端人配...
Vue中hash模式和history模式的區別
參考文章 在vue的路由配置中有mode選項，最直觀的區別就是在hash模式下的位址列裡的url夾雜著 號 而history模式下沒有。vue預設使用hash。mode hash mode history hash history 利用了 html5 history inte ce 中新增的 pus...
hash模式和history模式 實現原理及區別
目前單頁應用 spa 越來越成為前端主流，單頁應用一大特點就是使用前端路由，由前端來直接控制路由跳轉邏輯，而不再由後端人員控制，這給了前端更多的自由。目前前端路由主要有兩種實現方式 hash模式和history模式，下面分別詳細說明。比如在用超連結製作錨點跳轉的時候，就會發現，url後面跟了 id ...