萬用路由 (wildcard route)
說明
- 在比對不到路由時,自動轉向到指定路由頁面
- 由於路由比對是根據routes[]裡面物件依照順序比對,因此必須放在最後一個物件
- 路由設定物件中的
pathMatch: "full"
屬性不可少
程式語法:
{
path: '**',
redirectTo: "/path",
pathMatch: "full"
}
程式碼範例:
1.建立error元件作為萬用路由設定頁面
ng g c error
2.將app-routing.module.ts
內的路由設定變更為如下:
const routes: Routes = [
{
path: '',
redirectTo: "/pageA",
pathMatch: "full"
},
{
path: 'pageA',
component: PageAComponent
},
{
path: 'pageB',
component: PageBComponent
},
{
path: 'error',
component: ErrorComponent
},
{
path: '**',
redirectTo: "/error",
pathMatch: "full"
}
];
2.在瀏覽器網址列輸入localhost:4200/不是pageA、pageB、error的任意網址
測試轉向效果