萬用路由 (wildcard route)


說明

  1. 在比對不到路由時,自動轉向到指定路由頁面
  2. 由於路由比對是根據routes[]裡面物件依照順序比對,因此必須放在最後一個物件
  3. 路由設定物件中的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的任意網址測試轉向效果

results matching ""

    No results matching ""