- 在vue-router路由對(duì)象中,路由有兩種模式: hash 和 history,而默認(rèn)的是hash模式,hash模式背后的原理是:
hash路由
- 監(jiān)聽路由的變化：onhashchange事件,只有#后面的地址發(fā)生變化，可以在window對(duì)象上監(jiān)聽這個(gè)事件:
window.onhashchange = function(event) {
console.log(event.oldURL, event.newURL);
let hash = loaction.hash //通過(guò)location對(duì)象來(lái)獲取hash地址
console.log(hash) // "#/notebooks/260827/list" 從#號(hào)開始
}
因?yàn)閔ash發(fā)生變化的url都會(huì)被瀏覽器記錄下來(lái)，從而你會(huì)發(fā)現(xiàn)瀏覽器的前進(jìn)后退都可以用
history路由
- 隨著history api的到來(lái)谐鼎，前端路由開始進(jìn)化了,前面的hashchange席楚，你只能改變#后面的url片段纱注，而history api則給了前端完全的自由
history api可以分為兩大部分畏浆，切換和修改，參考MDN
切換歷史狀態(tài)
包括back,forward,go三個(gè)方法狞贱，對(duì)應(yīng)瀏覽器的前進(jìn)刻获，后退，跳轉(zhuǎn)操作瞎嬉，有同學(xué)說(shuō)了蝎毡，(谷歌)瀏覽器只有前進(jìn)和后退，沒有跳轉(zhuǎn)氧枣，嗯沐兵，在前進(jìn)后退上長(zhǎng)按鼠標(biāo)，會(huì)出來(lái)所有當(dāng)前窗口的歷史記錄便监，從而可以跳轉(zhuǎn)(也許叫跳更合適)：
history.go(-2);//后退兩次
history.go(2);//前進(jìn)兩次
history.back(); //后退
hsitory.forward(); //前進(jìn)
修改歷史狀態(tài)
包括了history.pushState(),history.replaceState()兩個(gè)方法,這兩個(gè)方法接收三個(gè)參數(shù):stateObj,title,url
history.pushState({color:'red'}, 'red', 'red'})
history.back();
history.forward();
通過(guò)pushstate把頁(yè)面的狀態(tài)保存在state對(duì)象中扎谎，當(dāng)頁(yè)面的url再變回這個(gè)url時(shí)，可以通過(guò)event.state取到這個(gè)state對(duì)象.
history模式的問(wèn)題：
通過(guò)history api茬贵，我們丟掉了丑陋的#簿透，但是它也有個(gè)毛惨婆邸：
不怕前進(jìn)解藻，不怕后退，就怕刷新葡盗，f5（如果后端沒有準(zhǔn)備的話）,因?yàn)樗⑿率菍?shí)實(shí)在在地去請(qǐng)求服務(wù)器的,不玩虛的螟左。
在hash模式下，前端路由修改的是#中的信息觅够，而瀏覽器請(qǐng)求時(shí)是不帶它玩的胶背，所以沒有問(wèn)題.但是在history下，你可以自由的修改path喘先，當(dāng)刷新時(shí)钳吟，如果服務(wù)器中沒有相應(yīng)的響應(yīng)或者資源，會(huì)分分鐘刷出一個(gè)404來(lái)窘拯。
所以红且，如果你想在github.io上搭一個(gè)單頁(yè)博客，就應(yīng)該選擇hash模式涤姊，如果要選擇history暇番，就要和后端配合，在刷新頁(yè)面時(shí)思喊，若未找到路由壁酬，則返回首頁(yè)。
