目錄

? 路由模式概述

一. 路由的hash和history模式的區(qū)別

1. hash模式

2. history模式

3. 兩種模式對(duì)比

二. 如何獲取頁(yè)面的hash變化

? 路由模式概述

單頁(yè)應(yīng)用是在移動(dòng)互聯(lián)時(shí)代誕生的，它的目標(biāo)是不刷新整體頁(yè)面，通過(guò)地址欄中的變化來(lái)決定內(nèi)容區(qū)域顯示什么內(nèi)容。

要達(dá)成這個(gè)目標(biāo)，我們要用到前端路由技術(shù)，具體來(lái)說(shuō)有兩種方式來(lái)實(shí)現(xiàn)：hash模式和history模式。hash模式是通過(guò)監(jiān)聽(tīng)hashChange事件來(lái)實(shí)現(xiàn)的，history模式是通過(guò)pushState方法+popstate事件來(lái)實(shí)現(xiàn)的。?

一. 路由的hash和history模式的區(qū)別

Vue-Router有兩種模式：hash模式和history模式。默認(rèn)的路由模式是hash模式。

1. hash模式

?? 簡(jiǎn)介

hash模式（又稱(chēng)哈希路由）是開(kāi)發(fā)中默認(rèn)的模式，它的URL帶著一個(gè)#，例如：http://www.abc.com/#/vue，它的hash值就是#/vue。

?? 特點(diǎn)

hash值會(huì)出現(xiàn)在URL里面，但是不會(huì)出現(xiàn)在HTTP請(qǐng)求中，對(duì)后端完全沒(méi)有影響，所以改變hash值，不會(huì)重新加載頁(yè)面。這種模式的瀏覽器支持度很好，低版本的IE瀏覽器也支持這種模式。 hash路由被稱(chēng)為是前端路由，已經(jīng)成為SPA（單頁(yè)面應(yīng)用）的標(biāo)配。

?? 原理

hash模式的主要原理就是onhashchange()事件：

window.onhashchange = function(event){
	console.log(event.oldURL, event.newURL);
	let hash = location.hash.slice(1);
}

使用onhashchange()事件的好處就是，在頁(yè)面的hash值發(fā)生變化時(shí)，無(wú)需向后端發(fā)起請(qǐng)求，window就可以監(jiān)聽(tīng)事件的改變，并按規(guī)則加載相應(yīng)的代碼。 除此之外，hash值變化對(duì)應(yīng)的URL都會(huì)被瀏覽器記錄下來(lái)，這樣瀏覽器就能實(shí)現(xiàn)頁(yè)面的前進(jìn)和后退。雖然是沒(méi)有請(qǐng)求后端服務(wù)器，但是頁(yè)面的hash值和對(duì)應(yīng)的URL關(guān)聯(lián)起來(lái)了。

hash模式是一種把前端路由的路徑用 # 拼接在真實(shí)URL后面的模式。形式上，hash模式url里面永遠(yuǎn)帶著#號(hào)，開(kāi)發(fā)當(dāng)中默認(rèn)使用這個(gè)模式

原理是通過(guò)location.hash屬性設(shè)置#后面的路徑發(fā)生變化，并且瀏覽器并不會(huì)重新發(fā)起請(qǐng)求

只要hash地址發(fā)生改變，則會(huì)觸發(fā)hashchange事件，我們?cè)谑录性O(shè)置地址對(duì)應(yīng)的視圖展示
?

hash模式的瀏覽器兼容性較好，就是看起來(lái)不夠優(yōu)雅。如果用戶(hù)考慮url的規(guī)范，那么就需要使用history模式，因?yàn)閔istory模式?jīng)]有#號(hào)，是個(gè)正常的url，適合推廣宣傳；

2. history模式

?? 簡(jiǎn)介

history模式（又稱(chēng)歷史路由）的URL中沒(méi)有#，它使用的是傳統(tǒng)的路由分發(fā)模式，即用戶(hù)在輸入一個(gè)URL時(shí)，服務(wù)器會(huì)接收這個(gè)請(qǐng)求，并解析這個(gè)URL，然后做出相應(yīng)的邏輯處理。

?? 特點(diǎn)

當(dāng)使用history模式時(shí)，URL就像這樣：http://abc.com/user/id。相比hash模式更加好看。但是，history模式需要后臺(tái)配置支持。如果后臺(tái)沒(méi)有正確配置，訪問(wèn)時(shí)會(huì)返回404。

history模式開(kāi)發(fā)的SPA項(xiàng)目，需要服務(wù)器端做額外的配置，否則會(huì)出現(xiàn)刷新白屏（鏈接分享失效）。原因是頁(yè)面刷新時(shí)，瀏覽器會(huì)向服務(wù)器真的發(fā)出對(duì)這個(gè)地址的請(qǐng)求，而這個(gè)文件資源又不存在，所以就報(bào)404。處理方式就由后端做一個(gè)保底映射:所有的請(qǐng)求全部攔截到index.html上。

?? API

history api可以分為兩大部分，切換歷史狀態(tài)和修改歷史狀態(tài)：

修改歷史狀態(tài)：包括了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法，這兩個(gè)方法應(yīng)用于瀏覽器的歷史記錄棧，提供了對(duì)歷史記錄進(jìn)行修改的功能。只是當(dāng)他們進(jìn)行修改時(shí)，雖然修改了url，但瀏覽器不會(huì)立即向后端發(fā)送請(qǐng)求。如果要做到改變url但又不刷新頁(yè)面的效果，就需要前端用上這兩個(gè)API。

切換歷史狀態(tài)： 包括forward()、back()、go()三個(gè)方法，對(duì)應(yīng)瀏覽器的前進(jìn)，后退，跳轉(zhuǎn)操作。
雖然history模式丟棄了丑陋的#。但是，它也有自己的缺點(diǎn)，就是在刷新頁(yè)面的時(shí)候，如果沒(méi)有相應(yīng)的路由或資源，就會(huì)刷出404來(lái)。 如果想要切換到history模式，就要進(jìn)行以下配置（后端也要進(jìn)行配置）：

const router = new VueRouter({
  mode: 'history',
  routes: [...]
})

history模式用到了HTML5中的history API，允許開(kāi)發(fā)者直接更新瀏覽器URL地址而不重新發(fā)起請(qǐng)求。

用到了history API：replaceState、pushState、back、forward和go這個(gè)5個(gè)方法。

但是歷史記錄改變以后，視圖并不會(huì)更新，我們需要在地址改變（包括使用onpopstate事件監(jiān)聽(tīng)歷史記錄的回退）后，重新設(shè)置視圖

history兼容性不如hash模式，而且瀏覽器在刷新的時(shí)候會(huì)按照路徑發(fā)送真實(shí)的資源請(qǐng)求，因此在線(xiàn)上部署基于historyAPI的單頁(yè)面應(yīng)用的時(shí)候，一定要后端配合支持才行（如果 URL 匹配不到任何靜態(tài)資源，則應(yīng)該返回同一個(gè) index.html 頁(yè)面）?

? 小 結(jié)：

???? 兩者原理不同

hash模式的實(shí)現(xiàn)原理是通過(guò)監(jiān)聽(tīng)hashChange事件來(lái)實(shí)現(xiàn)的。

history模式是通過(guò)調(diào)用history.pushState方法(或者replaceState) 并且監(jiān)聽(tīng)popstate事件來(lái)實(shí)現(xiàn)的。history.pushState會(huì)追加歷史記錄，并更換地址欄地址信息，但是頁(yè)面不會(huì)刷新，需要手動(dòng)調(diào)用地址變化之后的處理函數(shù)，并在處理函數(shù)內(nèi)部決定跳轉(zhuǎn)邏輯；監(jiān)聽(tīng)popstate事件是為了響應(yīng)瀏覽器的前進(jìn)后退功能。

???? 兩者表現(xiàn)不同

hash模式會(huì)在地址欄中有#號(hào)，而history模式?jīng)]有；同時(shí)由于history模式的實(shí)現(xiàn)原理用到H5的新特性，所以它對(duì)瀏覽器的兼容性有要求(IE >= 10)。?

3. 兩種模式對(duì)比

調(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è)置的新值必須與原來(lái)不一樣才會(huì)觸發(fā)動(dòng)作將記錄添加到棧中；
• pushState() 通過(guò) stateObject 參數(shù)可以添加任意類(lèi)型的數(shù)據(jù)到記錄中；而 hash 只可添加短字符串；
• pushState() 可額外設(shè)置 title 屬性供后續(xù)使用。
• hash模式下，僅hash符號(hào)之前的url會(huì)被包含在請(qǐng)求中，后端如果沒(méi)有做到對(duì)路由的全覆蓋，也不會(huì)返回404錯(cuò)誤；history模式下，前端的url必須和實(shí)際向后端發(fā)起請(qǐng)求的url一致，如果沒(méi)有對(duì)用的路由處理，將返回404錯(cuò)誤。

hash模式和history模式都有各自的優(yōu)勢(shì)和缺陷，我們還是要根據(jù)實(shí)際情況選擇性的使用。

二. 如何獲取頁(yè)面的hash變化

（1）監(jiān)聽(tīng)$route的變化

// 監(jiān)聽(tīng),當(dāng)路由發(fā)生變化的時(shí)候執(zhí)行
watch: {
  $route: {
    handler: function(val, oldVal){
      console.log(val);
    },
    // 深度觀察監(jiān)聽(tīng)
    deep: true
  }
},

（2）window.location.hash讀取#值 window.location.hash 的值可讀可寫(xiě)，讀取來(lái)判斷狀態(tài)是否改變，寫(xiě)入時(shí)可以在不重載網(wǎng)頁(yè)的前提下，添加一條歷史訪問(wèn)記錄。

參考資料：vue路由和vue3總結(jié)

文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-628369.html

到了這里，關(guān)于路由的hash和history模式的區(qū)別的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！