快捷導(dǎo)航

Vue?Router路由hash模式與history模式詳細(xì)介紹

更新時(shí)間：2022年08月31日 15:07:39 作者：小綿楊Yancy

Vue?Router是Vue.js官方的路由管理器。它和Vue.js的核心深度集成，讓構(gòu)建單頁面應(yīng)用變得易如反掌。路由實(shí)際上就是可以理解為指向，就是我在頁面上點(diǎn)擊一個(gè)按鈕需要跳轉(zhuǎn)到對(duì)應(yīng)的頁面，這就是路由跳轉(zhuǎn)

一、前言

對(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模式

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

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

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

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

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

三、history模式

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

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

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

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

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

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

@頁面標(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作用相反。

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

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

打開百度，搜索“CSDN”:

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

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

效果：

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

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

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

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

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

您可能感興趣的文章: