一、前言

對(duì)于hash模式和history模式，最直接的區(qū)別就是地址欄帶不帶"#"號(hào)了。

vue腳手架搭建的項(xiàng)目的路由默認(rèn)是hash模式。

hash模式：

創(chuàng)建路由實(shí)例時(shí)，添加mode:"history"屬性，即可使用history模式。

const router = new VueRouter({
  routes,
  mode: "history"
})

history模式：

二、hash模式

最開(kāi)始學(xué)習(xí)超鏈接a時(shí)，就可以利用錨點(diǎn)”#”實(shí)現(xiàn)跳轉(zhuǎn)到同一頁(yè)面的不同id所對(duì)應(yīng)的位置。我們知道vue是單頁(yè)面應(yīng)用，所以很符號(hào)使用錨點(diǎn)實(shí)現(xiàn)路由。

打開(kāi)vue官網(wǎng)，點(diǎn)擊 “vuejs是什么目錄”：

可以看到地址欄，是帶#的，所以是hash模式：

打開(kāi)控制臺(tái)，輸入window.location(包含了瀏覽器地址欄的地址信息):

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

三、history模式

使用hash模式完全可以實(shí)現(xiàn)路由的功能，但是，地址欄帶"#號(hào)"，讓人感覺(jué)不太正常。而且有的時(shí)候分享頁(yè)面到某些app時(shí)，有的app里面url是不允許帶有#號(hào)的。所以需要使用history模式，去掉“#號(hào)”。

前面知道了hash模式是觀察window.location.hash的變化來(lái)改變路由的。

而HTML5 History Interface 中新增的兩個(gè)神器 pushState() 和 replaceState() 方法（需要特定瀏覽器支持），用來(lái)完成 URL 跳轉(zhuǎn)而無(wú)須重新加載頁(yè)面。

每個(gè)window窗口都有持有自己的history，為了安全起見(jiàn)history不會(huì)暴露訪問(wèn)過(guò)的URL，但是可以通過(guò)API進(jìn)行前進(jìn)或后退訪問(wèn)URL的內(nèi)容

1、 window.history.pushState(data, title, targetURL);

@狀態(tài)對(duì)象：傳給目標(biāo)路由的信息,可為空

@頁(yè)面標(biāo)題：目前所有瀏覽器都不支持,填空字符串即可

@可選url：目標(biāo)url，不會(huì)檢查url是否存在，且不能跨域。如不傳該項(xiàng),即給當(dāng)前url添加data

2、window.history.replaceState(data, title, targetURL);@類似于pushState,但是會(huì)直接替換掉當(dāng)前url,而不會(huì)在history中留下記錄。

3、popstate事件，回退，與pushState作用相反。

通俗地說(shuō)就是瀏覽器的地址欄url信息存儲(chǔ)在了window.history.state中，但是調(diào)試時(shí)我們發(fā)現(xiàn)，其為null，是為了防止網(wǎng)頁(yè)獲取你的歷史瀏覽地址，所以給隱藏了，但是其內(nèi)部可以獲取。

舉一個(gè)例子，立馬就明白了：

打開(kāi)百度，搜索“CSDN”:

然后我們打開(kāi)控制臺(tái)，輸入：

window.history.replaceState(null, 'title', 'https://www.baidu.com/')

效果：

地址欄變成了百度首頁(yè)的地址，但是并不影響當(dāng)前頁(yè)面的內(nèi)容。這也就是history模式下vue單頁(yè)面實(shí)現(xiàn)不同路由顯示的原理，程序中路由改變時(shí)，將路由地址顯示在地址欄，然后根據(jù)路由對(duì)應(yīng)的地址顯示組件就行了，此時(shí)并沒(méi)有重新請(qǐng)求服務(wù)器，但是地址欄確改變了，給用戶造成了頁(yè)面跳轉(zhuǎn)的假象。然而，我們知道，vue項(xiàng)目中，我們一直都在index.html中。

但是，同時(shí)也暴露了history一個(gè)問(wèn)題，就如上面的例子，如果我將地址欄替換為"https://www.baidu.com/"后，刷新頁(yè)面，肯定會(huì)跳轉(zhuǎn)到百度首頁(yè)的，因?yàn)樗⑿聲?huì)重新請(qǐng)求服務(wù)器的。然而實(shí)際應(yīng)用中，vue中的路由地址并沒(méi)有在服務(wù)器上有對(duì)應(yīng)的后端處理，它僅僅用于前端的路由切換。

那么如何解決呢？這就需要服務(wù)器端做點(diǎn)手腳，將不存在的路徑請(qǐng)求重定向到入口文件（index.html）。

所以相比于hash，history雖然可以實(shí)現(xiàn)正常美觀的地址顯示，但是代價(jià)就是需要解決刷新時(shí)請(qǐng)求服務(wù)器的404的問(wèn)題。

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