【前端路由】Vue-router 中hash模式和history模式的區別
咱們今天說說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 無#，好看
支持版本 支持低版本瀏覽器和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 打開正常！
【前端路由】Vue-router 中hash模式和history模式的區別