在《web路由那些事兒（一）》中，對web路由的概念以及基礎(chǔ)有了基本的了解，具體參見——http://m.itdecent.cn/p/afe0b302f696 。
接下來看看具體的web路由的簡單實現(xiàn)。
一、概述
web路由有兩種實現(xiàn)基礎(chǔ)，分別為錨點和pushstate，這里采用新出現(xiàn)的api——pushstate來實現(xiàn)，而錨點的實現(xiàn)方式相差并不大，而且經(jīng)常作為pushstate實現(xiàn)方式的兼容性補充。
實現(xiàn)基礎(chǔ)：
1、history.pushstate——更改url，添加歷史記錄
2、window.onpopstate——監(jiān)聽瀏覽器后退請求
3、routeObject——規(guī)范路由邏輯
先上Demo——http://tkixp9.github.io/wy_router/ 。
二、代碼結(jié)構(gòu)
路由定義：
myRouter = {
routerSet: [],
addRoute: function (path, handle) {
this.routerSet.push({
path, // 參數(shù)，可以為任何類型的數(shù)據(jù)，用于路由匹配
handle // 函數(shù)，用于路由匹配成功后執(zhí)行
});
execute: function (params) {
this.routerSet.forEach(function (item) {
if (item.path == params.path) { // 找到匹配項，執(zhí)行對應(yīng)的行為函數(shù)
item.handle.apply(null, [params]);
return true;
}
return false;
});
},
// 需要更改url是調(diào)用，記錄和顯示url
addHistoryRecord: function (state, title, url) {
history.pushState(state, title, url);
}
};
myRouter.addRoute('action', actionHandle); // 路由初始化，action handle執(zhí)行對應(yīng)的業(yè)務(wù)邏輯
說明：
路由myRouter本質(zhì)是一個數(shù)據(jù)映射表，定義某些所對應(yīng)的操作。
另外，提供根據(jù)參數(shù)執(zhí)行期望操作的接口。
路由監(jiān)聽：
window.addEventListener("popstate", function () {
var params = history.state;
params.path = getParameterByName('path');
myRouter.execute(params);
});
說明：
監(jiān)聽瀏覽器前進和后退的操作，params主要通過兩種方式記錄和獲取：
一是url中；
二是history.state（對應(yīng)pushstate的第一個參數(shù)）中。
路由記錄：
function changeUrlAndContent() {
doSomething(); // 對應(yīng)的業(yè)務(wù)邏輯
myRouter.addHistoryRecord(state, 'title_ignore', url); // 記錄對應(yīng)的路由到history中
}
三、流程分析
網(wǎng)頁內(nèi)操作流程：
1、用戶操作，例如點擊某個button；
2、執(zhí)行changeUrlAndContent()處理業(yè)務(wù)邏輯（網(wǎng)絡(luò)請求、更改顯示等）；
3、調(diào)用history.pushState添加記錄到瀏覽器歷史中；
后退前進流程：
1、用戶點擊瀏覽器后退或前進按鈕；
2、監(jiān)聽到popstate，即歷史記錄發(fā)生pop事件，url發(fā)生變化；
3、從url和history中獲取對應(yīng)的參數(shù)；
4、調(diào)用路由，查找匹配對應(yīng)參數(shù)的回調(diào)函數(shù)并執(zhí)行；
四、web路由應(yīng)用
在前一章中，提到過AJAX是web路由產(chǎn)生和發(fā)展的基石，是web路由的核心，然而在上面的路由demo中卻沒有AJAX的只言片語，是不是漏掉了？
web路由的結(jié)構(gòu)和概念延伸自后臺服務(wù)中的路由，它本身是一種獨立的技術(shù)，不依賴其他任何技術(shù)。例如Demo中用到了popstate和pushState，但這也是可以用其他的方式代替——url#hash。
之所以說AJAX是基石和核心，主要是因為沒有AJAX就沒有web路由以及web路由賴以生長的環(huán)境——單頁面應(yīng)用。
單頁面應(yīng)用是僅包含單個網(wǎng)頁的應(yīng)用，目的是為了提供類似于本地應(yīng)用的流暢用戶體驗。它的主要特點包括：一個頁面和局部刷新。
而“一個頁面”的特點正是由web路由完成的，或者說web路由正是由一個頁面的要求而產(chǎn)生的。
另一個特點“局部刷新”則是由AJAX來完成——一種支持異步請求的技術(shù)。
當(dāng)web路由以一種技術(shù)被提及時，它必然是獨立的；而當(dāng)web路由以一種框架被提及時，則是指包含了web路由技術(shù)和AJAX技術(shù)的一種路由框架。目前，從應(yīng)用的角度，web路由、AJAX、單頁面是緊密聯(lián)系在一起的。
五、web路由框架
討論前端的技術(shù)問題，最后都會回到框架。對于web路由來說，框架并不陌生，如今幾乎每個框架都會有一套路由機制或者組件或者插件，例如angularjs不僅本身有一套ng-router的機制，而且還有第三方的ui-router插件，之后新出現(xiàn)的react、vue等都有自己的router組件，而微信小程序內(nèi)部的路由機制則和vue相差不大。
web路由在各個框架中都有各自的聲明和定義，但是原理都是一樣的，是否選擇對應(yīng)的框架，則需要根據(jù)具體項目的需求、大小、規(guī)劃以及資源來確定了。
