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

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

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

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

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

            // 子路由中目錄名配置為""時(shí)表示二級(jí)目錄為空，此時(shí)相對(duì)路徑為“/”將會(huì)匹配到此空目錄。
            // 配置空目錄時(shí)，你也可以這樣設(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í)可傳入一個(gè)路徑數(shù)組，這樣表示訪問“/about/amaplejs”或“/about/amaple”都將映射到“module/about/amaplejs”模塊
            childRouter.module ().route ( [ "amaplejs", "amaple" ], "module/about/amaplejs" ).route ( "jquery", "module/about/jquery" );
        } );
    },
    // ...
} );

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

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

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

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

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

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

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

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

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

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

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

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

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

        // 在頂層目錄中將“/”重定向到“/index”
        router.redirect ( "/", "/index" );
        // 重定向的優(yōu)先級(jí)高于匹配模塊，所以router.redirect函數(shù)可在route函數(shù)前面或后面調(diào)用，都會(huì)優(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”部分將會(huì)被這層的重定向匹配，并重定向到“describe/i_am_a_title”

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

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

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

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

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

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

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


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

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

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