hash模式
這里的 hash 就是指 url 尾巴后的 # 號以及后面的字符。這里的 # 和 css 里的 # 是一個意思势木。hash 也 稱作 錨點蛛倦，本身是用來做頁面定位的，她可以使對應(yīng) id 的元素顯示在可視區(qū)域內(nèi)啦桌。
由于 hash 值變化不會導致瀏覽器向服務(wù)器發(fā)出請求溯壶，而且 hash 改變會觸發(fā) hashchange 事件，瀏覽器的進后退也能對其進行控制甫男，所以人們在 html5 的 history 出現(xiàn)前且改，基本都是使用 hash 來實現(xiàn)前端路由的。
使用到的api：
window.location.hash = 'qq' // 設(shè)置 url 的 hash板驳，會在當前url后加上 '#qq'
var hash = window.location.hash // '#qq'
window.addEventListener('hashchange', function(){
// 監(jiān)聽hash變化又跛，點擊瀏覽器的前進后退會觸發(fā)
})
history模式
已經(jīng)有 hash 模式了，而且 hash 能兼容到IE8若治， history 只能兼容到 IE10慨蓝，為什么還要搞個 history 呢？
首先端幼，hash 本來是拿來做頁面定位的礼烈，如果拿來做路由的話，原來的錨點功能就不能用了婆跑。其次此熬，hash 的傳參是基于 url 的，如果要傳遞復雜的數(shù)據(jù)滑进，會有體積的限制犀忱，而 history 模式不僅可以在url里放參數(shù)，還可以將數(shù)據(jù)存放在一個特定的對象中郊供。
window.history.pushState(state, title, url)
// state：需要保存的數(shù)據(jù)峡碉，這個數(shù)據(jù)在觸發(fā)popstate事件時，可以在event.state里獲取
// title：標題驮审，基本沒用鲫寄，一般傳 null
// url：設(shè)定新的歷史記錄的 url吉执。新的 url 與當前 url 的 origin 必須是一樣的，否則會拋出錯誤地来。url可以是絕對路徑戳玫，也可以是相對路徑。
//如 當前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 基本相同蜡秽，但她是修改當前歷史記錄府阀，而 pushState 是創(chuàng)建新的歷史記錄
window.addEventListener("popstate", function() {
// 監(jiān)聽瀏覽器前進后退事件，pushState 與 replaceState 方法不會觸發(fā)
});
window.history.back() // 后退
window.history.forward() // 前進
window.history.go(1) // 前進一步芽突，-2為后退兩步试浙，window.history.lengthk可以查看當前歷史堆棧中頁面的數(shù)量
history 模式改變 url 的方式會導致瀏覽器向服務(wù)器發(fā)送請求，這不是我們想看到的寞蚌，我們需要在服務(wù)器端做處理：如果匹配不到任何靜態(tài)資源田巴，則應(yīng)該始終返回同一個 html 頁面。
