【Amaple教程】1. 啟動路由

crossoverJie 發布于2019-08-01 18:27 / 1201人閱讀

摘要：開始編寫具體的代碼前，首先需啟動單頁模式并進行簡單配置。我們在開發包的文件中調用函數并傳入一個對象進行啟動路由并配置單頁應用。繼續學習下一節教程模塊也可回顧上一節教程前言

開始編寫具體的代碼前，首先需啟動單頁模式并進行簡單配置。在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文件）內定義一個模塊節點，來告訴框架請求的模塊內容放到頁面的哪個位置

[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函數選定配置的模塊節點，函數內沒有傳入任何參數表示選定一個不具名的模塊節點，
          // 我們在內已定義了一個不具名的模塊節點
          
          // 你也可以為模塊指定名稱，像這樣，
          // 此時需這樣調用router.module ( "main" )來選定模塊節點。
          
          // router.route函數為選定模塊配置匹配路徑與模塊的映射，
          // 當url相對路徑為“/”時將加載index.html模塊文件，當url相對路徑為“/about”時將加載about.html模塊文件
     },

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

簡單的配置后，接下來就可以來編寫這個index.html模塊文件了，在src/module文件夾內添加一個index.html文件。

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

云服務器 GPU云服務器 Amaple linux啟動1 無線路由器設置教程 win8.1電話激活教程

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/51747.html

Amaple.js框架詳細介紹

摘要：體驗優先的單頁框架點此查看倉庫是專為單頁應用而設計的基于頁面模塊化的框架，它可使開發者快速開發單頁應用。使用前置要求此框架的使用者可不需了解構建工具，但必須掌握和的基礎知識。 showImg(https://segmentfault.com/img/bV2wO3?w=792&h=303); Amaple · 體驗優先的JavaScript單頁框架 Amaple (點此查看Github倉...

loonggg 2019-08-30 13:52 評論0 收藏0
Amaple.js框架詳細介紹

摘要：體驗優先的單頁框架點此查看倉庫是專為單頁應用而設計的基于頁面模塊化的框架，它可使開發者快速開發單頁應用。使用前置要求此框架的使用者可不需了解構建工具，但必須掌握和的基礎知識。 showImg(https://segmentfault.com/img/bV2wO3?w=792&h=303); Amaple · 體驗優先的JavaScript單頁框架 Amaple (點此查看Github倉...

imingyu 2019-08-01 18:27 評論0 收藏0
Amaple.js框架詳細介紹

摘要：體驗優先的單頁框架點此查看倉庫是專為單頁應用而設計的基于頁面模塊化的框架，它可使開發者快速開發單頁應用。使用前置要求此框架的使用者可不需了解構建工具，但必須掌握和的基礎知識。 showImg(https://segmentfault.com/img/bV2wO3?w=792&h=303); Amaple · 體驗優先的JavaScript單頁框架 Amaple (點此查看Github倉...

chemzqm 2019-08-22 14:00 評論0 收藏0
【Amaple教程】1. 啟動路由

摘要：開始編寫具體的代碼前，首先需啟動單頁模式并進行簡單配置。我們在開發包的文件中調用函數并傳入一個對象進行啟動路由并配置單頁應用。繼續學習下一節教程模塊也可回顧上一節教程前言開始編寫具體的代碼前，首先需啟動單頁模式并進行簡單配置。在src/index.html中引入amaple.js框架文件后我們就可以使用am這個全局對象。我們在開發包的src/config.js文件中調用am.star...

zhangwang 2019-08-30 13:52 評論0 收藏0