路由機制

元件架構

1. 整個app由樹狀結構的元件組成
2. 最上層UI元件是AppComponent

用途

1. 根據路由配置頁面中的UI元件
2. 在同一個路由中改變頁面時，元件不會消滅重建
3. 儲存頁面中UI元件的配置狀態(路由狀態)
4. 路由狀態：
   1. 定義頁面應顯示的UI元件
   2. 紀錄網址路徑與元件之間的關係
   3. 藉由樹狀結構的路由定義，預先定義路由狀態

說明

1. 路由設定routes是Routes類別，陣列
2. 裡面的每個物件是設定個別頁面路由狀態，是Route類別
3. 路由比對時由陣列[0]開始依照順序比對

路由定義程式範例

const routes : Routes= [
    {
        path: '',
        component: Component01,
        children: [
            {
                path: '', 
                redirectTo: 'childComponent01'
            },
            {
                path: 'child01',
                component: childComponent01
            },
            {
                path: 'child02',
                component: childComponent02
            },
        ]
    },
    {
        path: 'component02',
        component: Component02,
    }
]