原文
大綱
1捅位、傳統(tǒng)路由
2、SPA導(dǎo)航
3俗慈、客戶端路由器的工作機(jī)制
1、傳統(tǒng)路由
在傳統(tǒng)Web應(yīng)用程序中遣耍，導(dǎo)航是以整個(gè)Web頁(yè)面為單位進(jìn)行的闺阱。當(dāng)在瀏覽器地址欄輸入一個(gè)新的URL地址時(shí)，通常情況下舵变，頁(yè)面請(qǐng)求從瀏覽器發(fā)往服務(wù)器酣溃，服務(wù)器響應(yīng)并返回一個(gè)完整的HTML頁(yè)面瘦穆。
其返回的是請(qǐng)求頁(yè)面的HTML文檔，瀏覽器收到頁(yè)面HTML文檔之后赊豌，將獲取該文檔引用的其他所有源文件扛或，如CSS與JavaScript文件。HTML文檔引用的其他資源如圖片碘饼，也將在瀏覽器解析文檔的HTML代碼及遇到相應(yīng)標(biāo)簽時(shí)得以下載熙兔。要顯示新內(nèi)容，瀏覽器就執(zhí)行一次完整的刷新動(dòng)作艾恼。
2住涉、SPA導(dǎo)航
SPA的DOM元素通常是作為SPAindex頁(yè)面中的Shell的起點(diǎn)。這就是全部所需钠绍。SPA模塊及MV*框架舆声，包括支持庫(kù)，都跟index頁(yè)面一同下載五慈，或者使用了AMD腳本加載庫(kù)的話則進(jìn)行異步加載纳寂。SPA應(yīng)用也有能力異步獲取 數(shù)據(jù)、任何遠(yuǎn)程模板(局部)以及尚未包括的其他資源泻拦，并按需動(dòng)態(tài)渲染視圖毙芜。
當(dāng)用戶導(dǎo)航時(shí)，視圖無縫呈現(xiàn)争拐。連同異步獲取的數(shù)據(jù)腋粥，整個(gè)應(yīng)用展示過程更加平滑，給人一種類似原生應(yīng)用的效果架曹，極大提升了用戶體驗(yàn)隘冲。以往那種舊頁(yè)面被清除，然后下載顯示新頁(yè)面所帶來的粗糙體驗(yàn)已不復(fù)存在绑雄。一旦初始頁(yè)面加載了展辞，SPA的各種動(dòng)作都不需要刷新它。
然而万牺，在SPA應(yīng)用加載之后罗珍，用戶需要有一種方式來訪問應(yīng)用的其它內(nèi)容。由于SPA仍然屬于基于Web的應(yīng)用程序脚粟，因此覆旱，用戶會(huì)希望使用地址欄和導(dǎo)航按鈕來進(jìn)行導(dǎo)航。但在只有一個(gè)頁(yè)面而且不刷新瀏覽器的情況下如何進(jìn)行SPA導(dǎo)航呢核无？
事實(shí)證明扣唱，這不僅可能，也很容易。讓單頁(yè)面環(huán)境中的導(dǎo)航成為可能的法寶就是客戶端路由器（或簡(jiǎn)稱路由器）噪沙。
但請(qǐng)記住當(dāng)我們討論導(dǎo)航時(shí)炼彪，說的是在用戶導(dǎo)航時(shí)管理SPA視圖、數(shù)據(jù)以及業(yè)務(wù)事務(wù)的狀態(tài)曲聂。路由器承擔(dān)著瀏覽器導(dǎo)航控制的職責(zé)霹购，并依此管理應(yīng)用程序狀態(tài)，其允許開發(fā)者直接將URL的改變映射到客戶端功能上朋腋。
通過這種方式齐疙，與服務(wù)器端的往返已不再是必需的。路由器借助幾種偵測(cè)瀏覽器位置發(fā)生改變的方法旭咽，來決定何時(shí)需要變化狀態(tài)贞奋，比如監(jiān)聽特定事件。只要URL發(fā)生改變穷绵，路由器就會(huì)試著使用其配置里的某個(gè)配置項(xiàng)來匹配新URL的某部分轿塔。
在剖析典型的路由器配置項(xiàng)之前，先來看一下圖4.3仲墨，其提供了SPA導(dǎo)航過程的概覽勾缭，其中還突出顯示了客戶端路由器。請(qǐng)注意路由器從未與服務(wù)器端發(fā)生交互目养。所有的路由都在瀏覽器端完成俩由。
3、客戶端路由器的工作機(jī)制
客戶端路由器的部分職責(zé)是允許用戶如同傳統(tǒng)Web應(yīng)用中那樣使用地址欄和瀏覽器導(dǎo)航按鈕癌蚁。許多客戶端路由器為了滿足該需求至少都提供了以下特性：
1幻梯、通過路由定義的路徑來匹配URL模式
2、當(dāng)匹配成功時(shí)允許應(yīng)用程序執(zhí)行代碼
3努释、當(dāng)路由觸發(fā)時(shí)允許指定需顯示的具體視圖
4碘梢、允許通過路由路徑傳入?yún)?shù)
5、允許用戶使用標(biāo)準(zhǔn)的瀏覽器導(dǎo)航方式來進(jìn)行SPA應(yīng)用導(dǎo)航伐蒂。
這些特性是提供最低限度SPA導(dǎo)航功能所必需的煞躬。但請(qǐng)記住，不存在所有客戶端路由器必須遵循的保障標(biāo)準(zhǔn)逸邦。這些知識(shí)我們會(huì)遇到的最常見選項(xiàng)恩沛。
路由器通過兩種方式進(jìn)行導(dǎo)航：
1、通過URL的片段標(biāo)識(shí)符(fragment identifiter)
2昭雌、通過HTML5歷史API（History API）
這兩種方式能夠讓路由器提供非服務(wù)器端的導(dǎo)航，即不會(huì)向服務(wù)器端發(fā)送請(qǐng)求
