【Amaple教程】1. 啟動路由

JOU_amjs發表於2018-01-24
路由

開始編寫具體的程式碼前，首先需啟動單頁模式並進行簡單配置。在src/index.html中引入amaple.js框架檔案後我們就可以使用am這個全域性物件。我們在開發包的src/config.js檔案中呼叫am.startRouter函式並傳入一個Object物件進行啟動路由並配置單頁應用。首先我們來配置url風格：

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應該顯示哪幾個模組，其實這也是很簡單的，具體分為兩步：

  • [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
} );

簡單的配置後，接下來就可以來編寫這個index.html模組檔案了，在src/module資料夾內新增一個index.html檔案。

繼續學習下一節：【AmapleJS教程】2. 模組
也可回顧上一節：【AmapleJS教程】前言

相關文章