本章将介紹如何使用avalon來實作前端路由功能。
我們需要用到兩個avalon路由配套子產品—— mmHistory.js 和 mmRouter.js 。其中mmHistory是用于曆史管理，它會劫持頁面上所有點選連結的行為，當這些連結是以 #/ 、#!/ 開頭，就嘗試比對路由規則，阻止頁面重新整理（通過hash方式或HTML5的replaceState方式）。mmRouter是給我們定義路由規則，路由規則可以更精細地指定每個參數(param)的比對規則，如果符合就執行對應的回調，如果不符合，就進入error回調。
關于該路由系統更具體的描述，可以查閱這裡。
作為示例，我們打算制作一個網站的 “使用者中心” 頁面，其中左側為導航清單，右側為受左側清單控制的内容顯示區域：
該“使用者中心”頁面有這麼幾個要求：
⑴ 頁面不跳轉，僅做局部（即内容區域部分）重新整理；
⑵ 可以通過不同的url進入對應的頁面（即内容區域顯示對應的内容）；
⑶ 浏覽器能記住url狀态，比如從“賬戶詳情”點入“我要充值”頁面，然後再點選浏覽器傳回按鈕，可以正确回到“賬戶詳情”頁面。
由于不是石器時代，自然不會再選擇iframe這種内耗高、不友好的元素來架構頁面（而且iframe也實作不了後面兩個需求呀）。那麼我們會很快聯想到Ajax技術，這個想法很本質，不過單純的Ajax也沒辦法達到我們的要求，是以才需要引入開頭提到的兩個avalon路由子產品。
我們可以先寫出簡單的頁面原型：
index.html：
user.js：
user.css：
運作結果如下：
接着我們要建立三個頁面——mine.html、detail.html 和 recharge.html ，分别對應“我的首頁”、“賬戶詳情” 和 “我要充值” 的右側内容，咱在裡面随便寫點内容意思意思即可，比如mine.html我就寫了一句話：
接着我們預設先把mine.html引入到index.html中，這裡我們借助avalon的 ms-include-src 接口，修改下index.html：
接着修改 user.js的部分：
運作如下：
接着是時候讓 mmHistory.js 和 mmRouter.js 發揮它們的作用了，我們修改下user.js的部分代碼：
注意由于在 require.config 的 shim 中我們已經定義了 mmHistory.js 和 mmRouter.js 是依賴于avalon的，故此處無須再引入avalon子產品，requireJS執行該代碼段之前會先加載好avalon的。
我們通過這兩行代碼執行了路由和曆史記錄的管理：
其中router.get() 的第一個參數表示路由比對規則，比如這裡的“/*path”表示比對全部路徑，比對到了就觸發回調callback函數。
更多的比對規則我們可以直接在 mmRouter.js 中檢視注釋資訊：
router.get() 在觸發callback前會生成一個this.path屬性供callback調用（你也可以給回調函數定義一個參數，其預設值等同與path），其值為目前比對到的路徑，比如當url字尾變成 #!/recharge 的時候，this.path的值為比對到的"/recharge" 。了解了這個之後，callback 函數也很好了解了：
這時候的運作結果如下所示：
自此便實作了我們的需求。但是這樣還不夠完美——每個頁面的樣式咋處理呢？
我們可以直接在頁面上寫<style>标簽，或者直接寫個<link>引入外部樣式檔案，但前者不好維護，後者畢竟不是插入到head中的不太規範。那麼我們能否也用requireJS子產品化動态引入樣式檔案呢？答案是肯定的，不過得借助于其元件css.js。
以“賬戶詳情”（detail.html）為例，我們建立一個detail.css檔案，裡面設定 .detail{color:red;}。
先確定require.config中的paths裡加上了該元件：
然後修改detail.html頁面内容：
“css!/XXX.css” 是css.js的寫法，注意以"css!"開頭即可。
以上便是avalon前端路由的簡單實作，本章的示例代碼可以從這裡下載下傳。
後續章節可能會開始寫一寫avalon的API。共勉~