VUE路由的hash模式與history模式的區(qū)別，這個(gè)也是面試常問的問題，這個(gè)題其實(shí)就是考驗(yàn)?zāi)愕拈_發(fā)經(jīng)驗(yàn)是否屬實(shí)。

小白回答：hash模式url帶#號(hào)，history模式不帶#號(hào)。

大牛解答：

形式上：hash模式url里面永遠(yuǎn)帶著#號(hào)，開發(fā)當(dāng)中默認(rèn)使用這個(gè)模式。如果用戶考慮url的規(guī)范那么就需要使用history模式，因?yàn)閔istory模式?jīng)]有#號(hào)，是個(gè)正常的url，適合推廣宣傳；

功能上：比如我們?cè)陂_發(fā)app的時(shí)候有分享頁面，那么這個(gè)分享出去的頁面就是用vue或是react做的，咱們把這個(gè)頁面分享到第三方的app里，有的app里面url是不允許帶有#號(hào)的，所以要將#號(hào)去除那么就要使用history模式，但是使用history模式還有一個(gè)問題就是，在訪問二級(jí)頁面的時(shí)候，做刷新操作，會(huì)出現(xiàn)404錯(cuò)誤，那么就需要和后端人配合，讓他配置一下apache或是nginx的url重定向，重定向到你的首頁路由上就ok了

正題開始

為了達(dá)到改變視圖的同時(shí)不會(huì)向后端發(fā)出請(qǐng)求這一目的，瀏覽器當(dāng)前提供了以下兩種支持：

hash模式：即地址欄 URL 中的 # 符號(hào)

比如這個(gè) URL：http://www.abc.com/#/hello， hash 的值為 #/hello

它的特點(diǎn)在于：hash 雖然出現(xiàn)在 URL 中，但不會(huì)被包括在 HTTP 請(qǐng)求中，對(duì)后端完全沒有影響，因此改變 hash 不會(huì)重新加載頁面。

history模式：利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。（需要特定瀏覽器支持）

這兩個(gè)方法應(yīng)用于瀏覽器的歷史記錄棧，在當(dāng)前已有的 back()、forward()、go() 方法的基礎(chǔ)之上，這兩個(gè)方法提供了對(duì)歷史記錄進(jìn)行修改的功能。當(dāng)這兩個(gè)方法執(zhí)行修改時(shí)，只能改變當(dāng)前地址欄的 URL，但瀏覽器不會(huì)向后端發(fā)送請(qǐng)求，也不會(huì)觸發(fā)popstate事件的執(zhí)行

因此可以說，hash 模式和 history 模式都屬于瀏覽器自身的特性，Vue-Router 只是利用了這兩個(gè)特性（通過調(diào)用瀏覽器提供的接口）來實(shí)現(xiàn)前端路由.

vue中的router有兩種模式：hash模式（默認(rèn)）、history模式（需配置mode: 'history'）

vue中的hash模式

即地址欄 URL 中的 # 符號(hào),這個(gè)#就是hash符號(hào)，中文名哈希符或錨點(diǎn)

比如這個(gè) URL：http://www.baidu.com/#/home，hash 的值為 #/home

它的特點(diǎn)在于：hash 雖然出現(xiàn)在 URL 中，但不會(huì)被包括在 HTTP 請(qǐng)求中，對(duì)后端完全沒有影響，因此改變 hash 不會(huì)重新加載頁面。

路由的哈希模式其實(shí)是利用了window.onhashchange事件，也就是說你的url中的哈希值（#后面的值）如果有變化，就會(huì)自動(dòng)調(diào)用hashchange的監(jiān)聽事件，在hashchange的監(jiān)聽事件內(nèi)可以得到改變后的url，這樣能夠找到對(duì)應(yīng)頁面進(jìn)行加載

window.addEventListener('hashchange', () => {
  // 把改變后的url地址欄的url賦值給data的響應(yīng)式數(shù)據(jù)current，調(diào)用router-view去加載對(duì)應(yīng)的頁面
  this.data.current = window.location.hash.substr(1)
})

vue中history模式

HTML5 History Interface 中新增的兩個(gè)神器 pushState() 和 replaceState() 方法（需要特定瀏覽器支持），用來完成 URL 跳轉(zhuǎn)而無須重新加載頁面，不過這種模式還需要后臺(tái)配置支持。因?yàn)槲覀兊膽?yīng)用是個(gè)單頁客戶端應(yīng)用，如果后臺(tái)沒有正確的配置，就需要前端自己配置404頁面。

pushState() 和 replaceState() 這兩個(gè)神器的作用就是可以將url替換并且不刷新頁面，好比掛羊頭賣狗肉，http并沒有去請(qǐng)求服務(wù)器該路徑下的資源，一旦刷新就會(huì)暴露這個(gè)實(shí)際不存在的“羊頭”，顯示404（因?yàn)闉g覽器一旦刷新，就是去真正請(qǐng)求服務(wù)器資源）

那么如何去解決history模式下刷新報(bào)404的弊端呢，這就需要服務(wù)器端做點(diǎn)手腳，將不存在的路徑請(qǐng)求重定向到入口文件（index.html），前后端聯(lián)手，齊心協(xié)力做好“掛羊頭賣狗肉”的完美特效

pushState方法、replaceState方法，只能導(dǎo)致history對(duì)象發(fā)生變化，從而改變當(dāng)前地址欄的 URL，但瀏覽器不會(huì)向后端發(fā)送請(qǐng)求，也不會(huì)觸發(fā)popstate事件的執(zhí)行

popstate事件的執(zhí)行是在點(diǎn)擊瀏覽器的前進(jìn)后退按鈕的時(shí)候，才會(huì)被觸發(fā)

window.addEventListener('popstate', () => {
 this.data.current = window.location.pathname
})

使用場(chǎng)景

一般場(chǎng)景下，hash 和 history 都可以，除非你更在意顏值，# 符號(hào)夾雜在 URL 里看起來確實(shí)有些不太美麗。

如果不想要很丑的 hash，我們可以用路由的 history 模式，這種模式充分利用 history.pushState API 來完成URL 跳轉(zhuǎn)而無須重新加載頁面。 Vue-router 另外，根據(jù) Mozilla Develop Network 的介紹，調(diào)用 history.pushState() 相比于直接修改 hash，存在以下優(yōu)勢(shì):

pushState() 設(shè)置的新 URL 可以是與當(dāng)前 URL 同源的任意 URL；而 hash 只可修改 # 后面的部分，因此只能設(shè)置與當(dāng)前 URL 同文檔的 URL

pushState() 設(shè)置的新 URL 可以與當(dāng)前 URL 一模一樣，這樣也會(huì)把記錄添加到棧中；而 hash 設(shè)置的新值必須與原來不一樣才會(huì)觸發(fā)動(dòng)作將記錄添加到棧中

pushState() 通過 stateObject 參數(shù)可以添加任意類型的數(shù)據(jù)到記錄中；而 hash 只可添加短字符串

pushState() 可額外設(shè)置 title 屬性供后續(xù)使用

總結(jié)

傳統(tǒng)的路由指的是：當(dāng)用戶訪問一個(gè)url時(shí)，對(duì)應(yīng)的服務(wù)器會(huì)接收這個(gè)請(qǐng)求，然后解析url中的路徑，從而執(zhí)行對(duì)應(yīng)的處理邏輯。這樣就完成了一次路由分發(fā)

而前端路由是不涉及服務(wù)器的，是前端利用hash或者HTML5的history API來實(shí)現(xiàn)的，一般用于不同內(nèi)容的展示和切換

到此這篇關(guān)于Vue-router中hash模式與history模式的區(qū)別詳解的文章就介紹到這了,更多相關(guān)Vue-router中hash模式與history模式區(qū)別內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論