hash與history的區(qū)別
兩種路由模式原因原因 對于 Vue 這類漸進式前端開發(fā)框架，
為了構建 SPA（單頁面應用）陕赃，
需要引入前端路由系統(tǒng)卵蛉，
這也就是 Vue-Router 存在的意義颁股。
前端路由的核心，就在于 —— 改變視圖的同時不會向后端發(fā)出請求傻丝。
因此有兩種路由
hash: 即地址欄 URL 中的#符號（此hash不是密碼學里的散列運算）甘有。
比如這個 URL：http://www.abc.com/#/hello，
hash的值為#/hello葡缰。它的特點在于：hash 雖然出現(xiàn)在 URL 中亏掀，
但不會被包括在 HTTP 請求中，對后端完全沒有影響泛释，因此改變 hash 不會重新加載頁面滤愕。history: 利用了HTML5 History Interface
中新增的pushState()和replaceState()方法。（需要特定瀏覽器支持）
這兩個方法應用于瀏覽器的歷史記錄棧怜校，在當前已有的back间影、forward、go的基礎之上茄茁，
它們提供了對歷史記錄進行修改的功能魂贬。只是當它們執(zhí)行修改時，雖然改變了當前的 URL裙顽，
但瀏覽器不會立即向后端發(fā)送請求付燥。
hash 模式和 history 模式都屬于瀏覽器自身的特性，
Vue-Router 只是利用了這兩個特性
（通過調用瀏覽器提供的接口）來實現(xiàn)前端路由愈犹。
使用場景
一般場景下机蔗，hash 和 history 都可以，除非你更在意顏值甘萧，#
符號夾雜在 URL 里看起來確實有些不太美麗。
如果不想要很丑的 hash梆掸，我們可以用路由的 history 模式扬卷，這種模式充分利用
history.pushState API來完成
URL 跳轉而無須重新加載頁面。
另外酸钦，根據(jù)Mozilla Develop Network
的介紹怪得，調用history.pushState()相比于直接修改hash，存在以下優(yōu)勢：
- pushState()設置的新 URL 可以是與當前 URL 同源的任意 URL卑硫；而
hash只可修改#
后面的部分徒恋，因此只能設置與當前 URL 同文檔的 URL； - pushState()設置的新 URL 可以與當前 URL 一模一樣欢伏，這樣也會把記錄添加到棧中入挣；
而hash設置的新值必須與原來不一樣才會觸發(fā)動作將記錄添加到棧中； - pushState()通過
stateObject參數(shù)可以添加任意類型的數(shù)據(jù)到記錄中硝拧；
而hash只可添加短字符串径筏； - pushState()可額外設置
title屬性供后續(xù)使用葛假。
當然啦，history也不是樣樣都好滋恬。
SPA 雖然在瀏覽器里游刃有余聊训，但真要通過 URL 向后端發(fā)起 HTTP 請求時，
兩者的差異就來了恢氯。尤其在用戶手動輸入 URL 后回車带斑，或者刷新（重啟）瀏覽器的時候。
-
hash模式下勋拟，僅hash符號之前的內容會被包含在請求中勋磕，
如http://www.abc.com，因此對于后端來說指黎，即使沒有做到對路由的全覆蓋朋凉，
也不會返回 404 錯誤。 -
history模式下醋安，前端的 URL 必須和實際向后端發(fā)起請求的 URL 一致杂彭，
如http://www.abc.com/book/id
。如果后端缺少對/book/id的路由處理吓揪，將返回 404 錯誤亲怠。
Vue-Router 官網(wǎng)里如此描述：“不過這種模式要玩好，還需要后臺配置支持所以呢柠辞，
你要在服務端增加一個覆蓋所有情況的候選資源：如果 URL 匹配不到任何靜態(tài)資源团秽，
則應該返回同一個index.html
頁面，這個頁面就是你 app 依賴的頁面叭首∠扒冢”
history缺點
通過
history api，我們丟掉了丑陋的#焙格，但是它也有個毛餐急稀：
不怕前進，不怕后退眷唉，就怕刷新予颤，f5，
（如果后端沒有準備的話）,因為刷新是實實在在地去請求服務器的,不玩虛的冬阳。在hash模式下蛤虐，前端路由修改的是#中的信息，而瀏覽器請求時是不帶它玩的肝陪，
所以沒有問題.但是在history下驳庭，你可以自由的修改path，當刷新時氯窍，
如果服務器中沒有相應的響應或者資源嚷掠，會分分鐘刷出一個404來捏检。
小結
??結合自身例子，對于一般的Vue + Vue-Router + Webpack + XXX
形式的 Web 開發(fā)場景不皆，用history模式即可贯城，
只需在后端（Apache 或 Nginx）進行簡單的路由配置，
同時搭配前端路由的 404 頁面支持霹娄。
