1、為什么要有 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 只是利用了這兩個特性（通過調用瀏覽器提供的接口）來實現前端路由。
2、使用場景
一般場景下，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模式下，僅hash符號之前的內容會被包含在請求中，如http://www.abc.com，因此對於后端來說，即使沒有做到對路由的全覆蓋，也不會返回 404 錯誤。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 頁面支持
以上三點摘自https://segmentfault.com/q/1010000010340823
4、history模式下如何做后端配置
history模式下直接打開導出的網頁時，頁面是無法渲染成功的
文件加載正常，但頁面卻沒顯示任何內容。
這是因為在history模式下，瀏覽器去打開“.../padExam/home”頁面時，會向服務端發送http請求來獲取頁面資源，而此處為本地路徑，后端沒有對路徑進行配置，請求自然以失敗告終，因此需要在服務端后台配置文件的訪問根目錄
上圖所示，在設置了訪問的根目錄后，將項目部署到tomcat，項目成功啟動
以上只是一個簡單的例子，在真實的開發環境中后端需要做復雜的路徑配置。