隨著 ajax 的使用越來越廣泛，前端的頁面邏輯開始變得越來越復(fù)雜了赌，特別是spa的興起墨榄，前端路由系統(tǒng)隨之開始流行。
1.從用戶的角度看勿她，前端路由主要實現(xiàn)了兩個功能（使用ajax更新頁面狀態(tài)的情況下）：
2.記錄當(dāng)前頁面的狀態(tài)（保存或分享當(dāng)前頁的url袄秩，再次打開該url時，網(wǎng)頁還是保存（分享）時的狀態(tài)）逢并；可以使用瀏覽器的前進后退功能（如點擊后退按鈕之剧，可以使頁面回到使用ajax更新頁面之前的狀態(tài)，url也回到之前的狀態(tài)）砍聊；
作為開發(fā)者背稼，要實現(xiàn)這兩個功能，我們需要做到：
1.改變url且不讓瀏覽器向服務(wù)器發(fā)出請求玻蝌；
2.監(jiān)測 url 的變化蟹肘；
3.截獲 url 地址词疼，并解析出需要的信息來匹配路由規(guī)則。
我們路由常用hash模式和history模式實際上就是實現(xiàn)了上面的功能疆前。
hash模式
hash是指url后的#以及后面的字符寒跳。這里的#和css中的#是一個意思。hash也稱作 錨點? 本身是用作做頁面定位的竹椒，它可以讓對應(yīng)id的元素顯示在可視區(qū)域內(nèi)童太。
window.location.hash = 'qq' // 設(shè)置 url 的 hash，會在當(dāng)前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 的熄阻，如果要傳遞復(fù)雜的數(shù)據(jù)，會有體積的限制倔约，而 history 模式不僅可以在url里放參數(shù)秃殉，還可以將數(shù)據(jù)存放在一個特定的對象中。
window.history.pushState(state, title, url)?
state：需要保存的數(shù)據(jù)浸剩，這個數(shù)據(jù)在觸發(fā)popstate事件時钾军，可以在event.state里獲取
?title：標(biāo)題，基本沒用绢要，一般傳 null
url：設(shè)定新的歷史記錄的 url吏恭。新的 url 與當(dāng)前 url 的 origin 必須是一樣的，否則會拋出錯誤重罪。url可以是絕對路徑樱哼，也可以是相對路徑。
如?在百度頁面控制臺輸出：
window.history.pushState(null, null, "https://www.baidu.com/?name=history");
地址欄會變?yōu)椋篽ttps://www.baidu.com/?name=history
執(zhí)行history.pushState(null, null, './qq/')蛆封，則變成 https://www.baidu.com/qq/
上面的例子中 改變url頁面并沒有刷新唇礁，同樣根據(jù)API所述勾栗，瀏覽器會產(chǎn)生瀏覽記錄惨篱。
