咱們今天說說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的區別
  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來實現的，一般用于不同內容的展示和切換。

----------------------------- 2018.10.19 補充 -----------------------------

history模式下，build之后本地 index.html 打開是無效的。

hash模式下，build之后本地 index.html 打開正常！