## 路由模塊(Router) # 概述： Router是一種根據不同URL的來表現的頁面狀態的能力，基于HTML5 history api實現. Router模塊提供了根據不同組件state、model的states、以及自定義states來實現的對瀏覽器的前進后退導航、有狀態的書簽、可分享的URL、URL自定義處理器等支持。如果你曾經使用過一些后端框架比如Express、Sinatra、Play,那么你將會發現和他們的想法非常相似。 # 為什么要基于客戶端的URL路由： URL是維護一個web app的狀態的非常好的方法，因為URL很容易被看到，很容易修改，而且可以被存儲為書簽和分享。 原本我們在服務端的web框架中使用URL路由技術，來達到根據不同的URL，不同的參數來返回不同的頁面， 現在我們可以配合客戶端的URL路由技術來達到更好用戶體驗。 # 客戶端路由能做什么： [](https://box.kancloud.cn/2015-09-24_5602ec8f82a90.gif) 如上圖，我們可以看到在URL中#!后面的部分是隨著頁面中組件contents的切換而變化的，這就是前端路由的能力-有狀態的URL（URL中會反映出當前頁面內的需要關心的狀態），同樣的如果你手動把URL中的#！content-1 改成#！content-2 你會發現contents是會切換到第二個頁面，同時不會有后臺請求發送的哦。 這里要注意下：我們可以發現雖然URL變化了，但是并沒有發送后端請求，這就是所謂的前端路由，一般情況是隨著URL變化，普通的后端路由情況是會重新發送請求獲取頁面的. 同時如果把這個有狀態的URL分享出去，打開這個URL后這個頁面同樣能定位到相應狀態，如下圖 [](https://box.kancloud.cn/2015-09-24_5602ec90a7dbc.gif) 這個時候，機智的朋友就會說了，既然手動修改URL能切換到第二個頁面，那么我寫一個是不是也能切換到第二個頁面？答案是當然，同學你果然機智！這就是我們前端路由模塊要支持的能力-支持[hashbang](https://developers.google.com/webmasters/ajax-crawling/docs/getting-started?csw=1)寫法的鏈接。 好了，說了這么多估計大家已經明白前端路由大致是個什么東東了把。其實Router模塊的實現并不是只有上面例子看起來那么簡單。 # Router模塊有什么： ### 首先我們看下Router對應的代碼主要的的模塊文件 * hashbangParser.js * router.js * routeState.js * 如果說組件就是一個狀態機，根據不同的狀態響應不同的邏輯、展現，那么每個組件可以把自己的狀態反映到URL中，但是WeX5的頁面是有很多model（可以認為一個.w頁面就是一個model） 組合出來的，所以我們認為每個model需要維護當前model下狀態的，所有每個model下就有一個對象$routeState. * model的狀態變化了，他有可能是根model（比如在portal中的portal頁面），他有可能是子model（比如portal中打開的頁面，windowDialog打開的頁面等），那么這些狀態怎么合并，怎么向上傳遞，父model收到變化通知要向子model分發，等問題，所以就有了router.js * 上面說到可能會到復雜的嵌套、組合等情況，那么url畢竟要有一定的復雜度，所以我們需要一個parser用來把復雜的url理解成對象。 # Router模塊怎么使用： * 現在支持route的組件有contents和dialog(windowDialog).只需要在設計界面設置組件的routable屬性為true，組件默認就可以有路由能力。當然組合嵌套情況默認已經支持，不用擔心。 * 如果我有自定義路由的需求怎么辦? 參考portal中自定義路由相關代碼，來看看他是怎么自定義路由的吧。這里就不詳細解釋代碼了。 # Router組件： route組件提供了自定義自己的路由的能力。 api說明： addRouteItem ：添加路由項 參數：name, param 從上面介紹已知：路由項有三部分組成 xid\name\param 這里xid為route組件的xid ，name、param就是你可以自定以的。 removeRouteItem：刪除路由項 參數：name publishState：把當前路由狀態發布出去（最終反映到url上） onRoute : 路由變動事件 （回調形事件） event格式如下 {source":"當前組件", "cancel":"false", "xid":"xid", "name":"name", "param":"param", "routeState":"routeState", "async":"false", "dtd":"dtd" } 你可以通過判斷 name來只對你關心的狀態變化進行處理 routeState 有三種 enter、leave、update 如果你的處理中有異步邏輯 可以設置async為true 然后通過dtd來完成異步處理。