1. 程式人生 > >【前端路由】Vue-router 中hash模式和history模式的區別

【前端路由】Vue-router 中hash模式和history模式的區別

作用 com 網易雲音樂 沒有 ash 無效 新頁面 大牛 補充

咱們今天說說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 打開正常!

【前端路由】Vue-router 中hash模式和history模式的區別