【Amaple教程】1. 啓動路由

時間 2019-11-10

原文原文鏈接

開始編寫具體的代碼前，首先需啓動單頁模式並進行簡單配置。在src/index.html中引入amaple.js框架文件後咱們就能夠使用am這個全局對象。咱們在開發包的src/config.js文件中調用am.startRouter函數並傳入一個Object對象進行啓動路由並配置單頁應用。首先咱們來配置url風格：javascript

am.startRouter ( {

     // amaplejs中存在兩種url模式，分別爲
     // url中帶「#」的hash模式，全部瀏覽器都支持此模式。可以使用history: am.HASH指定
     // url中不帶「#」的restful模式，此模式使用html5 history API實現，與普通url相同，
     // 但在不支持此特性的瀏覽器中不能正常使用，且需後臺服務端的配置支持，可以使用history: am.BROWSER指定
     // 以上爲兩種可選的url模式,你也能夠指定history : am.AUTO來讓框架自動選擇模式，在支持html5 history API的瀏覽器下自動使用此模式，
     // 不支持的狀況下將自動回退使用hash模式
     history : am.HASH
} );

配置一個簡單的匹配路由

正如咱們所知到的，不一樣url將會顯示不一樣的頁面，在這裏咱們也需告訴框架一個url應該顯示哪幾個模塊，其實這也是很簡單的，具體分爲兩步：html

[1].在入口html文件（即src/index.html文件）內定義一個模塊節點，來告訴框架請求的模塊內容放到頁面的哪一個位置

<body>
     <!-- 在<body>內添加一個<div>並給它添加:module屬性，這樣就指定了一個不具名的模塊節點 -->
     <!-- 你能夠將模塊節點理解爲模塊渲染輸出的容器，:module屬性爲空值表示不具名的模塊節點，且任何標籤均可以做爲模塊節點 -->
     <div :module></div>
</body>

[2].在am.startRouter函數中爲模塊設置相關參數，在函數參數內分別添加baseURL、module和routes參數，以下：

am.startRouter( {
    baseURL : {
          // 爲模塊文件設置base路徑，全部的模塊文件請求路徑都將基於「/module」目錄，不設置時默認「/」
          module: "/module"
     },

     // 模塊文件後綴，其實默認的模塊文件後綴就是「.html」，你也能夠爲它設置其餘後綴
     module : {
          suffix: ".html"
     },

     // routes定義的function接收一個Router類的對象，使用此對象咱們就能夠告訴框架一個url應該顯示哪幾個模塊
     routes : function ( router ) {

          router.module ().route ( "/", "index" ).route ( "/about", "about" );
          // 在module和route函數內都會返回router對象自己，因此可以使用鏈式調用
          // router.module函數選定配置的模塊節點，函數內沒有傳入任何參數表示選定一個不具名的模塊節點，
          // 咱們在<body>內已定義了一個不具名的模塊節點
          
          // 你也能夠爲模塊指定名稱，像這樣<div :module="main"></div>，
          // 此時需這樣調用router.module ( "main" )來選定模塊節點。
          
          // router.route函數爲選定模塊配置匹配路徑與模塊的映射，
          // 當url相對路徑爲「/」時將加載index.html模塊文件，當url相對路徑爲「/about」時將加載about.html模塊文件
     },

     // 已講解過的配置
     history : am.HASH
} );