【前端路由】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 無#，好看
回車刷新 能夠加載到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 打開正常！