參考文檔（技術博客支持原創作者分享，尊重別人的勞動成果）
此文檔爲技術總結，不屬於該UP主原創
https://blog.csdn.net/lyn1772671980/article/details/80804419
https://www.jb51.net/article/143923.htm
https://router.vuejs.org/zh/guide/essentials/history-mode.html
https://blog.csdn.net/garrettzxd/article/details/80657281
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，但瀏覽器不會立即向後端發送請求。
什麼是pushState（）和replaceState（）
https://developer.mozilla.org/zh-CN/docs/Web/API/History_API
因此可以說，hash 模式和 history 模式都屬於瀏覽器自身的特性，Vue-Router 只是利用了這兩個特性（通過調用瀏覽器提供的接口）來實現前端路由。
使用場景
一般場景下，hash 和 history 都可以，除非你更在意顏值，# 符號夾雜在 URL 裏看起來確實有些不太美麗。
如果不想要很醜的 hash，我們可以用路由的 history 模式，這種模式充分利用 history.pushState API 來完成
URL 跳轉而無須重新加載頁面。
另外，根據 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 依賴的頁面。”
history模式怕啥
通過history api，我們丟掉了醜陋的#，但是它也有個毛病：
不怕前進，不怕後退，就怕刷新，f5，（如果後端沒有準備的話）,因爲刷新是實實在在地去請求服務器的,不玩虛的。
在hash模式下，前端路由修改的是#中的信息，而瀏覽器請求時是不帶它玩的，所以沒有問題.但是在history下，你可以自由的修改path，當刷新時，如果服務器中沒有相應的響應或者資源，會分分鐘刷出一個404來。
常用的API
1.history.length：
返回當前頁面所產生的歷史記錄個數，即在同一個瀏覽器tab下產生的歷史記錄；
2.history.pushState(state,title,URL)：
向瀏覽器新增一條歷史記錄，但是不會刷新當前頁面（不會重載），其中state爲對象，可以用作攜帶信息用，title：目前來看沒啥用一般爲空或null，URL：即要更改頁面的URL，且必須同源，不能跨域；
3.history.replaceState(state,title,URL):
更改當前瀏覽器的歷史記錄，即把當前執行此代碼頁面的記錄給替換掉，參數與第二條相同；
4.history.back()、history.forward()、history.go()：
分別爲前進一個歷史，後退一個，history.go(Number)，其中Number可正可負，即向前或向後若干個記錄
5.history.state：
返回當前頁面狀態參數，此參數一般由history.pushState(state,title,URL);以及history.replaceState(state,title,URL);附帶的state值