摘要：在第節(jié)啟動路由章節(jié)中為了能讓單頁應(yīng)用順利跑起來，我們提前介紹了簡單的路由配置方法。我們已了解路由配置的目的是指定不同的下對應(yīng)的模塊節(jié)點(diǎn)也叫做模塊容器內(nèi)應(yīng)該顯示哪個模塊的內(nèi)容，它還有更多高級的用法如匹配路由通配符的配置重定向等。

在 第1節(jié)《啟動路由》 章節(jié)中為了能讓單頁應(yīng)用順利跑起來，我們提前介紹了簡單的路由配置方法。我們已了解路由配置的目的是指定不同的url下對應(yīng)的 模塊節(jié)點(diǎn)（也叫做模塊容器）內(nèi)應(yīng)該顯示哪個模塊的內(nèi)容，它還有更多高級的用法如匹配路由通配符的配置、重定向等。

一個路由路徑是具體的路徑如/、/about，那么它們就屬于靜態(tài)路由。這里我們試著配置一個復(fù)雜點(diǎn)的靜態(tài)匹配路由，在正常情況下，如果一個url的相對路徑中存在兩級目錄，那么在模塊結(jié)構(gòu)中也有相應(yīng)嵌套層數(shù)，如：

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

        // 頂層路由路徑為"/"時表示根目錄，頂層模塊的路由路徑一般需以“/”開頭
        router.module ().route ( "/", "module/index", function ( childRouter ) {

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

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

實際項目中我們經(jīng)常需要多個甚至所有的路由路徑都匹配同一個模塊，如一個文章模塊，不同id的文章都將匹配此模塊，又比如一個頁面的 header 和 footer 模塊總是保持原樣。顯然，這不可能在配置路由時使用數(shù)組列出所有的路由路徑，此時我們就需要使用匹配路由通配符來解決這個問題：

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

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

當(dāng)url為/article/123時，文章模塊的am.Module對象中將在param對象中創(chuàng)建id參數(shù)，你可以通過id的參數(shù)值獲取對應(yīng)的文章內(nèi)容進(jìn)行顯示：

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

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

匹配路由通配符也支持在多級目錄同時設(shè)置，這是會在param對象中創(chuàng)建多個對應(yīng)的屬性。

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

匹配路由通配符還允許你通過正則表達(dá)式限制匹配的內(nèi)容。

// “/article/:id(d+)”表示id通配符只匹配一位或多位的數(shù)字
// 如它可匹配“/article/123”，但不能匹配“/article/a123”
// 正則表達(dá)式中使用“”轉(zhuǎn)義時應(yīng)該成雙出現(xiàn)
router.module ( "article" ).route ( "/article/:id(d+)", "module/article" );

如果url從/article/123跳轉(zhuǎn)到/article/456時文章模塊不會被替換，但param.id的值被更新為456，這時文章模塊的paramUpdated 生命周期函數(shù) 就會被調(diào)用。

通過router.redirect函數(shù)你可以從一個路徑重定向到另一個路徑，重定向的起始目錄取決于當(dāng)前正在匹配的路由目錄：

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

        // 在頂層目錄中將“/”重定向到“/index”
        router.redirect ( "/", "/index" );
        // 重定向的優(yōu)先級高于匹配模塊，所以router.redirect函數(shù)可在route函數(shù)前面或后面調(diào)用，都會優(yōu)先重定向路徑

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

            // 重定向的匹配路徑與跳轉(zhuǎn)路徑也可以設(shè)置通配符
            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" );
        } );
    },
    // ...
} );

我們已了解有時候更新模塊時部分模塊不會被替換，這些模塊不會被卸載重新渲染，但你有時可能希望它們回到初始化狀態(tài)，這時router.forcedRender函數(shù)就可以幫上忙了，它能強(qiáng)制讓一個本來不需卸載的模塊卸載并重新渲染：

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

        // 為“article”模塊節(jié)點(diǎn)配置時直接調(diào)用forcedRender函數(shù)，該模塊節(jié)點(diǎn)內(nèi)渲染的模塊都會強(qiáng)制重新渲染
        router.module ( "article" ).forcedRender ().route ( "/article/:id", "module/article" );
    },
    // ...
} );

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

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

        // 調(diào)用router.error404函數(shù)設(shè)置404路徑，此函數(shù)只能在最外層路由對象調(diào)用
        // 錯誤路徑建議以“/”開始
        router.error404 ( "/404" );


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

 恭喜你，已學(xué)到最后一節(jié)了，快去實際項目中練習(xí)使用吧 

回顧上一節(jié)：【AmapleJS教程】5. 插件