【Amaple教程】6. 路由配置

在 第1節《啓動路由》 章節中爲了能讓單頁應用順利跑起來，咱們提早介紹了簡單的路由配置方法。咱們已瞭解路由配置的目的是指定不一樣的url下對應的 模塊節點（也叫作模塊容器）內應該顯示哪一個模塊的內容，它還有更多高級的用法如匹配路由通配符的配置、重定向等。

配置靜態匹配路由

一個路由路徑是具體的路徑如/、/about，那麼它們就屬於靜態路由。這裏咱們試着配置一個複雜點的靜態匹配路由，在正常狀況下，若是一個url的相對路徑中存在兩級目錄，那麼在模塊結構中也有相應嵌套層數，如：

// 假如已知module/index.html、module/about.html中都已定義了一個不具名的嵌套模塊節點
am.startRouter ( {
    routes: function ( router ) {

        // 頂層路由路徑爲"/"時表示根目錄，頂層模塊的路由路徑通常需以「/」開頭
        router.module ().route ( "/", "module/index", function ( childRouter ) {

            // 子路由中目錄名配置爲""時表示二級目錄爲空，此時相對路徑爲「/」將會匹配到此空目錄。
            // 配置空目錄時，你也能夠這樣設置：childRouter.module ().defaultRoute ( "module/index/default" )
            childRouter.module ().route ( "", "module/index/default" ).route ( "describe", "module/index/describe" );
        } )
        .route ( "/about", "module/about", function ( childRouter ) {

            // 配置路由路徑時可傳入一個路徑數組，這樣表示訪問「/about/amaplejs」或「/about/amaple」都將映射到「module/about/amaplejs」模塊
            childRouter.module ().route ( [ "amaplejs", "amaple" ], "module/about/amaplejs" ).route ( "jquery", "module/about/jquery" );
        } );
    },
    // ...
} );

匹配路由通配符

實際項目中咱們常常須要多個甚至全部的路由路徑都匹配同一個模塊，如一個文章模塊，不一樣id的文章都將匹配此模塊，又好比一個頁面的 header 和 footer 模塊老是保持原樣。顯然，這不可能在配置路由時使用數組列出全部的路由路徑，此時咱們就須要使用匹配路由通配符來解決這個問題：

am.startRouter ( {
    routes: function ( router ) {

        // 匹配路由通配符以「:」開頭
        router.module ( "article" ).route ( "/article/:id", "module/article" );
        // 這樣如「/article/123」、「/article/456」、「/article/789」等都將會匹配module/article.html模塊
    },
    // ...
} );

當url爲/article/123時，文章模塊的am.Module對象中將在param對象中建立id參數，你能夠經過id的參數值獲取對應的文章內容進行顯示：

new am.Module ( {
    mounted : function ( http ) {
        var _this = this;

        // 此時this.param.id的值爲"123"，即:id通配符所匹配的字符串
        // 使用http預約義插件請求數據
        http.get ( "article?id=" + this.param.id, "json" ).done ( function ( res ) {
            _this.state.title = res.title;
            _this.state.content = res.content;
        } );
    }
} );

匹配路由通配符也支持在多級目錄同時設置，這是會在param對象中建立多個對應的屬性。

// 這是會在模塊對象的param中建立date和id兩個屬性
router.module ( "article" ).route ( "/article/:date/:id", "module/article" );

匹配路由通配符還容許你經過正則表達式限制匹配的內容。

// 「/article/:id(\\d+)」表示id通配符只匹配一位或多位的數字
// 如它可匹配「/article/123」，但不能匹配「/article/a123」
// 正則表達式中使用「\」轉義時應該成雙出現
router.module ( "article" ).route ( "/article/:id(\\d+)", "module/article" );

若是url從 /article/123跳轉到 /article/456時文章模塊不會被替換，但param.id的值被更新爲 456，這時文章模塊的 paramUpdated 生命週期函數 就會被調用。

重定向

經過router.redirect函數你能夠從一個路徑重定向到另外一個路徑，重定向的起始目錄取決於當前正在匹配的路由目錄：

am.startRouter ( {
    routes: function ( router ) {

        // 在頂層目錄中將「/」重定向到「/index」
        router.redirect ( "/", "/index" );
        // 重定向的優先級高於匹配模塊，因此router.redirect函數可在route函數前面或後面調用，都會優先重定向路徑

        router.module ().route ( "/index", "module/index", function ( childRouter ) {

            // 重定向的匹配路徑與跳轉路徑也能夠設置通配符
            childRouter.redirect ( "introduce/:title", "describe/:title" );
            // 第二層的重定向起始目錄爲「/index/」以後的路徑
            // 如「/index/introduce/i_am_a_title」的「introduce/i_am_a_title」部分將會被這層的重定向匹配，並重定向到「describe/i_am_a_title」

            childRouter.module ().route ( "", "module/index/default" ).route ( "describe/:title", "module/index/describe" );
        } );
    },
    // ...
} );

強制從新渲染一個模塊

咱們已瞭解有時候更新模塊時部分模塊不會被替換，這些模塊不會被卸載從新渲染，但你有時可能但願它們回到初始化狀態，這時router.forcedRender函數就能夠幫上忙了，它能強制讓一個原本不需卸載的模塊卸載並從新渲染：

am.startRouter ( {
    routes: function ( router ) {

        // 爲「article」模塊節點配置時直接調用forcedRender函數，該模塊節點內渲染的模塊都會強制從新渲染
        router.module ( "article" ).forcedRender ().route ( "/article/:id", "module/article" );
    },
    // ...
} );

404錯誤路徑設置

當加載一個或多個模塊時，任意一個模塊文件未找到時將會觸發 404錯誤 路徑的模塊匹配，配置 404錯誤 路徑以下：

am.startRouter ( {
    routes: function ( router ) {

        // 調用router.error404函數設置404路徑，此函數只能在最外層路由對象調用
        // 錯誤路徑建議以「/」開始
        router.error404 ( "/404" );


        // 爲404路徑配置渲染模塊
        router.module ( "article" ).route ( "/404", "module/404" );
        // ...
    },
    // ...
} );

恭喜你，已學到最後一節了，快去實際項目中練習使用吧

回顧上一節：【AmapleJS教程】5. 插件