一、hash模式
hash是指url上#和其后面的鏈接，#稱之為錨點(diǎn)。
由于 hash 值變化不會(huì)導(dǎo)致瀏覽器向服務(wù)器發(fā)出請(qǐng)求珊随，而且 hash 改變會(huì)觸發(fā) hashchange 事件（hashchange只能改變 # 后面的url片段）；更關(guān)鍵的一點(diǎn)是，因?yàn)閔ash發(fā)生變化的url都會(huì)被瀏覽器記錄下來(lái)叶洞，從而你會(huì)發(fā)現(xiàn)瀏覽器的前進(jìn)后退都可以用了鲫凶。
window.location.hash = 'qq' // 設(shè)置 url 的 hash，會(huì)在當(dāng)前url后加上 '#qq'
var hash = window.location.hash // '#qq'
window.addEventListener('hashchange', function(){
// 監(jiān)聽(tīng)hash變化衩辟，點(diǎn)擊瀏覽器的前進(jìn)后退會(huì)觸發(fā)
})
二螟炫、history模式
首先，hash 本來(lái)是拿來(lái)做頁(yè)面定位的艺晴，如果拿來(lái)做路由的話昼钻，原來(lái)的錨點(diǎn)功能就不能用了。其次封寞，hash 的傳參是基于 url 的然评，如果要傳遞復(fù)雜的數(shù)據(jù)，會(huì)有體積的限制狈究，而 history 模式不僅可以在url里放參數(shù)碗淌，還可以將數(shù)據(jù)存放在一個(gè)特定的對(duì)象中。
history api可以分為兩大部分：切換和修改
1抖锥、切換歷史狀態(tài)包括back亿眠、forward、go
這三個(gè)方法磅废，對(duì)應(yīng)瀏覽器的前進(jìn)纳像，后退，跳轉(zhuǎ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)
2宫峦、修改歷史狀態(tài)包括了 pushState, replaceState兩個(gè)方法
這兩個(gè)方法接收三個(gè)參數(shù):stateObj, title, url
window.history.pushState(state, title, url)
// state：需要保存的數(shù)據(jù)潭兽，這個(gè)數(shù)據(jù)在觸發(fā)popstate事件時(shí)，可以在event.state里獲取
// title：標(biāo)題斗遏，基本沒(méi)用，一般傳 null
// url：設(shè)定新的歷史記錄的 url鞋邑。新的 url 與當(dāng)前 url 的 origin 必須是一樣的诵次，否則會(huì)拋出錯(cuò)誤。url可以是絕對(duì)路徑枚碗，也可以是相對(duì)路徑逾一。
//如 當(dāng)前url是 https://www.baidu.com/a/,執(zhí)行history.pushState(null, null, './qq/')，則變成 https://www.baidu.com/a/qq/肮雨，
//執(zhí)行history.pushState(null, null, '/qq/')遵堵，則變成 https://www.baidu.com/qq/
window.history.replaceState(state, title, url)
// 與 pushState 基本相同，但她是修改當(dāng)前歷史記錄，而 pushState 是創(chuàng)建新的歷史記錄
window.addEventListener("popstate", function() {
// 監(jiān)聽(tīng)瀏覽器前進(jìn)后退事件陌宿，pushState 與 replaceState 方法不會(huì)觸發(fā)
});
history模式下锡足，不怕前進(jìn)后退，就怕h5刷新頁(yè)面壳坪，因?yàn)樗⑿马?yè)面是向服務(wù)器請(qǐng)求了舶得。
history 模式改變 url 的方式會(huì)導(dǎo)致瀏覽器向服務(wù)器發(fā)送請(qǐng)求，這不是我們想看到的爽蝴，我們需要在服務(wù)器端做處理：如果匹配不到任何靜態(tài)資源沐批，則應(yīng)該始終返回同一個(gè) html 頁(yè)面。
nginx服務(wù)器配置：
// 意思為,匹配url和url/下的文件蝎亚，如果嗎九孩，沒(méi)有匹配到，則返回index.html
location / {
try_files $uri $uri/ /index.html;
}
