建站
咨詢
售后
建站咨詢
新聞中心
現(xiàn)在有個(gè)問(wèn)題是，我們了解這兩個(gè)模式的區(qū)別嗎?或者只是了解它的路徑上有沒(méi)有 # 這個(gè)符號(hào)的區(qū)別嗎?
hash模式
hash模式是開(kāi)發(fā)中默認(rèn)的模式，它的URL帶著一個(gè)#，例如：www.baidu.com/#/vue，它的hash值就是#/vue
hash的值會(huì)出現(xiàn)再URL里面的，但是不會(huì)出現(xiàn)再HTTP請(qǐng)求之中的，也就是說(shuō)，它并沒(méi)有向后端發(fā)起請(qǐng)求，對(duì)后端是沒(méi)有影響的
我們看一下如果沒(méi)有使用哈希在瀏覽器是怎么樣的
在上面可以看出，如果萬(wàn)一后端沒(méi)有給我們配備路由，我們?nèi)菀讈G失這個(gè)頁(yè)面，請(qǐng)求不到這個(gè)URL。
再看看有哈希路由的
我沒(méi)有在后端配置這個(gè)路由，但是它依然可以加載到，說(shuō)明
哈希路由它只是改變hash值，不會(huì)重新加載頁(yè)面，這樣的話跟我們app的體驗(yàn)是一樣的，只是改變了樣子，但是沒(méi)有改變內(nèi)在
而且這種模式瀏覽器支持度非常好，而且低版本的瀏覽器也支持，沒(méi)有兼容性的問(wèn)題。
目前來(lái)說(shuō)，hash路由它被稱為前端路由，作為單頁(yè)應(yīng)用的標(biāo)準(zhǔn)搭配了，但是這么好用原理知道多少呢?
我們來(lái)看一下它的實(shí)現(xiàn)原理
上面我寫了一個(gè)demo，hash模式的主要原理就是onhashchange()事件，使用onhashchange()事件的好處就是，在頁(yè)面的hash值發(fā)生變化時(shí)，無(wú)需向后端發(fā)起請(qǐng)求
我通過(guò)傳入一個(gè)事件對(duì)象，如果路由發(fā)生改變就會(huì)觸發(fā)這個(gè)函數(shù)，分別打印新舊URL，然后通過(guò)location.hash獲取到這個(gè)hash值。
而且，頁(yè)面是無(wú)刷新的
我們看一下瀏覽器
這樣看來(lái)，我們可以通過(guò)這樣的路由來(lái)讓我們的頁(yè)面發(fā)生變化，而且不用給后端發(fā)起請(qǐng)求。
還有就是hash值變化對(duì)應(yīng)的URL都會(huì)被瀏覽器記錄下來(lái)，這樣瀏覽器就能實(shí)現(xiàn)頁(yè)面的前進(jìn)和后退。而且這樣用起來(lái)非常的流暢，像使用APP一樣
history模式
history模式的URL中沒(méi)有#，它使用傳統(tǒng)的路由分發(fā)模式，就是說(shuō)用戶在輸入一個(gè)URL時(shí)，服務(wù)器會(huì)接收這個(gè)請(qǐng)求，并解析這個(gè)URL，然后做出相應(yīng)的處理，也就是它向服務(wù)器發(fā)起了一個(gè)請(qǐng)求差不錯(cuò)
先看demo
我在點(diǎn)擊btn的時(shí)候傳入一個(gè)路由對(duì)象，假設(shè)他是index，然后我用history.pushState()切換了路由，模擬了網(wǎng)頁(yè)路由的切換，一旦這個(gè)路由切換了，就會(huì)被監(jiān)聽(tīng)到
然后我設(shè)想當(dāng)我們?yōu)g覽器前進(jìn)后退的時(shí)候也會(huì)被監(jiān)聽(tīng)到，所以加了window.onpopstate這個(gè)API，傳入事件對(duì)象，監(jiān)聽(tīng)它們路由的變化
我們看一下瀏覽器
當(dāng)我進(jìn)入的時(shí)候先打印出它的path: /history.html，然后我又點(diǎn)擊了哪個(gè)按鈕，切換了路由
然后我有按了瀏覽器的回退到了history這個(gè)路由，渲染了history這個(gè)頁(yè)面，然后我又點(diǎn)擊了一下前進(jìn)按鈕，它又渲染了index這個(gè)頁(yè)面
然后為什么第一次回退會(huì)打印null/history.html呢，因?yàn)樗穆窂脚c對(duì)應(yīng)關(guān)系的狀態(tài)，因?yàn)槲以谝婚_(kāi)始的history沒(méi)有定義路徑，所以為null，后來(lái)能打印是因?yàn)槲叶x了路徑，換句話說(shuō)就是，如果我后端沒(méi)有配置它的路徑，頁(yè)面容易出現(xiàn)404，也就是頁(yè)面丟失的狀態(tài)
總體來(lái)說(shuō)吧，hash模式和history模式都有各自的優(yōu)勢(shì)和缺陷，如果是說(shuō)哪一個(gè)好用，具體要看應(yīng)用場(chǎng)景
分享題目：帶你了解Vue-Router的兩種路由模式
網(wǎng)頁(yè)路徑：http://www.dlmjj.cn/article/dpsosdo.html
