在vue-router路由對(duì)象中贿衍，路由有兩種模式：hash和history衷旅，而默認(rèn)的是hash模式.
hash路由
- onhashchange事件在扰，可以在windows對(duì)象上監(jiān)聽(tīng)這個(gè)事件:
windows.onhashchange = function(event){
console.log(event.oldURL,event.newURL);
let hash = location.hasg //通過(guò)location對(duì)象來(lái)獲取hash地址
console.log(hash) // #/notebooks/123456/list 地址從#號(hào)開(kāi)始
}
因?yàn)閔ash發(fā)生變化的url都會(huì)被瀏覽器記錄下來(lái)胚股，從而會(huì)發(fā)現(xiàn)瀏覽器的前進(jìn)后退都可以用
history路由
- 隨著 history api的到來(lái)，前端路由開(kāi)始進(jìn)化了士八，前面的hashchange容燕，你只能改變#后面的url片段，而history api則給了前端完全的自由婚度，history api可以分為兩大部分蘸秘，切換和修改
切換歷史狀態(tài)
包括 back,forward,go三個(gè)方法，對(duì)應(yīng)瀏覽器的前進(jìn)蝗茁，后退醋虏，跳轉(zhuǎn)操作。很多小伙伴只知道瀏覽器有前進(jìn)和后退评甜，其實(shí)在前進(jìn)后退上長(zhǎng)按鼠標(biāo)，會(huì)彈出歷史記錄仔涩，從而完成跳轉(zhuǎn).
history.go(-2); //后退兩次
history.go(2);//前進(jìn)兩次
history.back();//后退
history.forward();前進(jìn)
修改歷史狀態(tài)
包括了pushState,replaceState兩個(gè)方法忍坷，這兩個(gè)方法接受三個(gè)參數(shù)：stateObj,title,url
history.pushState({color:'red','red','red'})
history.back();
通過(guò)pushstate把頁(yè)面的狀態(tài)保存在state對(duì)象中，當(dāng)頁(yè)面的url再變回這個(gè)url時(shí)熔脂，可以通過(guò)event.state取到這個(gè)state對(duì)象.
history 模式的補(bǔ)充
對(duì)于vue開(kāi)發(fā)的單頁(yè)面應(yīng)用佩研，我們?cè)谇袚Q不同的頁(yè)面的時(shí)候，可以發(fā)現(xiàn)html永遠(yuǎn)只有一個(gè)霞揉，這也真是稱之為單頁(yè)面的原因旬薯，而vue-router 默認(rèn) hash 模式 —— 使用 URL 的 hash 來(lái)模擬一個(gè)完整的 URL，于是當(dāng) URL 改變時(shí)适秩，頁(yè)面不會(huì)重新加載绊序。而當(dāng)開(kāi)啟history模式的時(shí)候，如果后端不進(jìn)行任何處理秽荞，在Dev階段一切都是正常的骤公，可是打包之后，訪問(wèn)路徑則會(huì)返回404扬跋，因此要在服務(wù)端增加一個(gè)覆蓋所有情況的候選資源：如果 URL 匹配不到任何靜態(tài)資源阶捆，則應(yīng)該返回同一個(gè) index.html 頁(yè)面，這個(gè)頁(yè)面就是app 依賴的頁(yè)面。
