文章目錄

• • 兩種模式
  • 特點(diǎn)
  • 總結(jié)

兩種模式

前端路由的核心，就在于 —— 改變視圖的同時(shí)不會(huì)向后端發(fā)出請(qǐng)求。

• hash模式是通過(guò)改變錨點(diǎn)(#)來(lái)更新頁(yè)面URL，并不會(huì)觸發(fā)頁(yè)面重新加載，我們可以通過(guò)window.onhashchange監(jiān)聽到hash的改變，從而處理路由。
• history模式是通過(guò)調(diào)用window.history對(duì)象上的一系列方法來(lái)實(shí)現(xiàn)頁(yè)面的無(wú)刷新跳轉(zhuǎn)。

特點(diǎn)

hash
hash，原本用來(lái)結(jié)合錨點(diǎn)控制頁(yè)面視窗的位置，具有以下特點(diǎn)：

• 可以改變URL，但不會(huì)觸發(fā)頁(yè)面重新加載（hash的改變會(huì)記錄在window.hisotry中）因此并不算是一次http請(qǐng)求，所以這種模式不利于SEO優(yōu)化
• 只能修改#后面的部分，因此只能跳轉(zhuǎn)與當(dāng)前URL同文檔的URL
• 只能通過(guò)字符串改變URL
• 通過(guò)window.onhashchange監(jiān)聽hash的改變，借此實(shí)現(xiàn)無(wú)刷新跳轉(zhuǎn)的功能。

history
根據(jù) Mozilla Develop Network 的介紹，調(diào)用 history.pushState()相比于直接修改 hash，存在以下優(yōu)勢(shì)

• 新的URL可以是與當(dāng)前URL同源的任意 URL，也可以與當(dāng)前URL一樣，但是這樣會(huì)把重復(fù)的一次操作記錄到棧中
• 通過(guò)參數(shù)stateObject可以添加任意類型的數(shù)據(jù)到記錄中
• 可額外設(shè)置title屬性供后續(xù)使用
• 通過(guò)pushState、replaceState實(shí)現(xiàn)無(wú)刷新跳轉(zhuǎn)的功能。

存在問(wèn)題
當(dāng)應(yīng)用通過(guò)vue-router跳轉(zhuǎn)到某個(gè)頁(yè)面后，因?yàn)榇藭r(shí)是前端路由控制頁(yè)面跳轉(zhuǎn)，雖然url改變，但是頁(yè)面只是內(nèi)容改變，并沒(méi)有重新請(qǐng)求，所以這套流程沒(méi)有任何問(wèn)題。但是，如果在當(dāng)前的頁(yè)面刷新一下，此時(shí)會(huì)重新發(fā)起請(qǐng)求，如果nginx沒(méi)有匹配到當(dāng)前url，就會(huì)出現(xiàn)404的頁(yè)面。那為什么hash模式不會(huì)出現(xiàn)這個(gè)問(wèn)題呢?因?yàn)閔ash雖然可以改變URL，但不會(huì)被包括在HTTP請(qǐng)求中。它被用來(lái)指導(dǎo)瀏覽器動(dòng)作，并不影響服務(wù)器端，因此，改變hash并沒(méi)有改變url，所以頁(yè)面路徑還是之前的路徑，nginx不會(huì)攔截。
因此，切記在使用history模式時(shí)，需要服務(wù)端允許地址可訪問(wèn)，否則就會(huì)出現(xiàn)404的尷尬場(chǎng)景。

總結(jié)

• 在hash模式下，所有的頁(yè)面跳轉(zhuǎn)都是客戶端進(jìn)行操作，因此對(duì)于頁(yè)面攔截更加靈活；但每次url的改變不屬于一次http請(qǐng)求，所以不利于SEO優(yōu)化。
• 在history模式下，借助history.pushState實(shí)現(xiàn)頁(yè)面的無(wú)刷新跳轉(zhuǎn)；這種方式URL的改變屬于http請(qǐng)求，因此會(huì)重新請(qǐng)求服務(wù)器，這也使得我們必須在服務(wù)端配置好地址，否則服務(wù)端會(huì)返回404，為確保不出問(wèn)題，最好在項(xiàng)目中配置404頁(yè)面。

總結(jié)

以上是生活随笔為你收集整理的vue router 的两种路由模式hash与history的区别的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。