這篇文章我們談談hash模式和history模式的區別，在下片文章我們談談vue2.0和vue3.0如何使用這兩種模式
網上看到一篇總結的比較全的文章，直接哪來當筆記用了，原文地址：https://blog.csdn.net/fifteen718/article/details/82529433
咱們今天說說VUE路由的hash模式與history模式的區別，這個也是面試常問的問題，不要小看這道題其實問到這里的時候那個面試官應該是個大牛，開發經驗豐富，這個題其實就是考驗你的開發經驗是否屬實。
咱們來看看小白的回答。
小白回答：hash模式url帶#號，history模式不帶#號。
回答總結：這個回答其實和沒有回答是一樣，百度一下都知道了，官網文檔也有，如果這樣回答就能通過，那么那個面試官問這個問題又有什么意義呢？其實這個問題的意義是考驗你的開發經驗，與實際場景的應用和與后端人員的配合。
大牛解答：hash模式url里面永遠帶着#號，我們在開發當中默認使用這個模式。那么什么時候要用history模式呢？如果用戶考慮url的規范那么就需要使用history模式，因為history模式沒有#號，是個正常的url適合推廣宣傳。當然其功能也有區別，比如我們在開發app的時候有分享頁面，那么這個分享出去的頁面就是用vue或是react做的，咱們把這個頁面分享到第三方的app里，有的app里面url是不允許帶有#號的，所以要將#號去除那么就要使用history模式，但是使用history模式還有一個問題就是，在訪問二級頁面的時候，做刷新操作，會出現404錯誤，那么就需要和后端人配合讓他配置一下apache或是nginx的url重定向，重定向到你的首頁路由上就ok啦。
以上摘自：VUE路由的hash模式與history模式的區別？
官方介紹：HTML5 History 模式
關於Vue的路由一直以來個人都覺得是一件很神奇的事情，一個單頁面應用居然可以做到多路由跳轉並按需加載頁面代碼。以往的做法都是通過錨點來定位對應的頁面代碼，而這種古老的操作方式最大的問題就是首屏加載緩慢，一次性加載了所有頁面代碼。
那么Vue-router又是怎么實現的呢？
首先，這個router有兩種模式：hash模式（默認）、history模式（需配置mode: 'history'）
| hash | history | |
| url顯示 | 有#，很Low | 無#，好看 |
| 回車刷新 | 可以加載到hash值對應頁面 | 一般就是404掉了 |
| 支持版本 | 支持低版本瀏覽器和IE瀏覽器 | HTML5新推出的API |
然后，我們來研究下兩者的原理：
hash模式
我們先來認識下這位朋友#，這個#就是hash符號，中文名哈希符或錨點，當然這在我們前端領域姑且這么稱呼。
然后哈希符后面的值，我們稱之為哈希值。OK，接下來我們繼續分析他的原理。路由的哈希模式其實是利用了window可以監聽onhashchange事件，也就是說你的url中的哈希值（#后面的值）如果有變化，前端是可以做到監聽並做一些響應（搞點事情），這么一來，即使前端並沒有發起http請求他也能夠找到對應頁面的代碼塊進行按需加載。
后來人們給他起了一個霸氣的名字叫前端路由，成為了單頁應用標配。
大伙可以圍觀下網易雲音樂的url模式：https://music.163.com/#/friend
history模式
我們先介紹一下H5新推出的兩個神器：pushState與replaceState
具體自行百度，簡而言之，這兩個神器的作用就是可以將url替換並且不刷新頁面，好比掛羊頭賣狗肉，http並沒有去請求服務器該路徑下的資源，一旦刷新就會暴露這個實際不存在的“羊頭”，顯示404。
那么如何去解決history模式下刷新報404的弊端呢，這就需要服務器端做點手腳，將不存在的路徑請求重定向到入口文件（index.html），前后端聯手，齊心協力做好“掛羊頭賣狗肉”的完美特效。
至此，我們的前端路由在實現與展示效果上又更進了一步！
總之，pushState方法不會觸發頁面刷新，只是導致history對象發生變化，地址欄會有反應。
總結
傳統的路由指的是：當用戶訪問一個url時，對應的服務器會接收這個請求，然后解析url中的路徑，從而執行對應的處理邏輯。這樣就完成了一次路由分發。
而前端路由是不涉及服務器的，是前端利用hash或者HTML5的history API來實現的，一般用於不同內容的展示和切換。
history模式下，build之后本地 index.html 打開是無效的。
hash模式下，build之后本地 index.html 打開正常！