一、前言

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

vue腳手架搭建的項目的路由默認是hash模式。

hash模式：

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

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

history模式：

二、hash模式

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

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

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

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

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

三、history模式

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

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

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

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

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

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

@頁面標題：目前所有瀏覽器都不支持,填空字符串即可

@可選url：目標url，不會檢查url是否存在，且不能跨域。如不傳該項,即給當前url添加data

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

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

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

舉一個例子，立馬就明白了：

打開百度，搜索“CSDN”:

然后我們打開控制臺，輸入：

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

效果：

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

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

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

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

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

最新評論