Vue平凡之路 （一）：Vue-router 中hash模式和history模式

Vue-router 中hash模式和history模式的關係

在vue的路由配置中有mode選項 最直觀的區別就是在url中 hash 帶了一個很醜的 # 而history是沒有#的
    
           mode:"hash";  
           mode:"history";

---

hash模式和history模式的不一樣

對於vue這類漸進式前端開發框架，爲了構建 SPA（單頁面應用），須要引入前端路由系統，這也就是 Vue-Router 存在的意義。前端路由的核心，就在於 —— 改變視圖的同時不會向後端發出請求。

爲了達到這一目的，瀏覽器當前提供瞭如下兩種支持：

• hash —— 即地址欄 URL 中的 # 符號（此 hash 不是密碼學裏的散列運算）。好比這個 URL：http://www.abc.com/#/hello，hash 的值爲 #/hello。它的特色在於：hash 雖然出如今 URL 中，但不會被包括在 HTTP 請求中，對後端徹底沒有影響，所以改變 hash 不會從新加載頁面。
• history —— 利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。（須要特定瀏覽器支持）這兩個方法應用於瀏覽器的歷史記錄棧，在當前已有的 back、forward、go 的基礎之上，它們提供了對歷史記錄進行修改的功能。只是當它們執行修改時，雖然改變了當前的 URL，但瀏覽器不會當即向後端發送請求。
  所以能夠說，hash 模式和 history 模式都屬於瀏覽器自身的特性，Vue-Router 只是利用了這兩個特性（經過調用瀏覽器提供的接口）來實現前端路由.

---

使用場景

通常場景下，hash 和 history 均可以，除非你更在乎顏值，# 符號夾雜在 URL 裏看起來確實有些不太美麗。

若是不想要很醜的 hash，咱們能夠用路由的 history 模式，這種模式充分利用 history.pushState API 來完成URL 跳轉而無須從新加載頁面。 Vue-router

另外，根據 Mozilla Develop Network 的介紹，調用 history.pushState() 相比於直接修改 hash，存在如下優點:

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

固然啦，history 也不是樣樣都好。SPA 雖然在瀏覽器裏遊刃有餘，但真要經過 URL 向後端發起 HTTP 請求時，二者的差別就來了。尤爲在用戶手動輸入 URL 後回車，或者刷新（重啓）瀏覽器的時候。

我的在接入微信的一個活動開發過程當中 開始使用的hash模式，可是後面後端沒法獲取到我#後面的url參數，因而就把參數寫在#前面，可是討論後仍是決定去掉這個巨醜的#
因而乎改用history模式，可是開始跑流程的時候是沒問題，可是後來發現跳轉後刷新或者回跳，會報一個404的錯誤，找不到指定的路由,最後後端去指向正確的路由 加了/hd/xxx 去匹配是否有這個/hd/{:path} 才得以解決

---

總結

• 1 hash 模式下，僅 hash 符號以前的內容會被包含在請求中，如 http://www.abc.com，所以對於後端來講，即便沒有作到對路由的全覆蓋，也不會返回 404 錯誤。
• 2 history 模式下，前端的 URL 必須和實際向後端發起請求的 URL 一致，如 http://www.abc.com/book/id。若是後端缺乏對 /book/id 的路由處理，將返回 404 錯誤。Vue-Router 官網裏如此描述：「不過這種模式要玩好，還須要後臺配置支持……因此呢，你要在服務端增長一個覆蓋全部狀況的候選資源：若是 URL 匹配不到任何靜態資源，則應該返回同一個 index.html 頁面，這個頁面就是你 app 依賴的頁面。」
• 3 結合自身例子，對於通常的 Vue + Vue-Router + Webpack + XXX 形式的 Web 開發場景，用 history 模式便可，只需在後端（Apache 或 Nginx）進行簡單的路由配置，同時搭配前端路由的 404 頁面支持。