Amaple教程 6 路由配置

在第1節《啟動路由》章節中為了能讓單頁應用順利跑起來，我們提前介紹了簡單的路由配置方法。我們已了解路由配置的目的是指定不同的url下對應的模組節點（也叫做模組容器）內應該顯示哪個模組的內容，它還有更多高階的用法如匹配路由萬用字元的配置、重定向等。

乙個路由路徑是具體的路徑如/、/about，那麼它們就屬於靜態路由。這裡我們試著配置乙個複雜點的靜態匹配路由，在正常情況下，如果乙個url的相對路徑中存在兩級目錄，那麼在模組結構中也有相應巢狀層數，如：

// 假如已知module/index.html、module/about.html中都已定義了乙個不具名的巢狀模組節點
am.startrouter ( )
.route ( "/about", "module/about", function ( childrouter ) );
},// ...
} );

實際專案中我們經常需要多個甚至所有的路由路徑都匹配同乙個模組，如乙個文章模組，不同id的文章都將匹配此模組，又比如乙個頁面的header和footer模組總是保持原樣。顯然，這不可能在配置路由時使用陣列列出所有的路由路徑，此時我們就需要使用匹配路由萬用字元來解決這個問題：

am.startrouter ( ,
// ...
} );

當url為/article/123時，文章模組的am.module物件中將在param物件中建立id引數，你可以通過id的引數值獲取對應的文章內容進行顯示：

new am.module (  );
}} );

匹配路由萬用字元也支援在多級目錄同時設定，這是會在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 (  );
},// ...
} );

我們已了解有時候更新模組時部分模組不會被替換，這些模組不會被解除安裝重新渲染，但你有時可能希望它們回到初始化狀態，這時router.forcedrender函式就可以幫上忙了，它能強制讓乙個本來不需解除安裝的模組解除安裝並重新渲染：

am.startrouter ( ,
// ...
} );

當載入乙個或多個模組時，任意乙個模組檔案未找到時將會觸發404錯誤路徑的模組匹配，配置404錯誤路徑如下：

am.startrouter ( ,
// ...
} );

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

Amaple教程 6 路由配置

angular6 路由配置

3 路由配置

RabbitMQ 實戰教程（四）路由

Amaple教程 6 路由配置

angular6 路由配置

3 路由配置

RabbitMQ 實戰教程（四） 路由

相關推薦

RabbitMQ 實戰教程（四）路由