iT邦幫忙

2021 iThome 鐵人賽

DAY 30
0
Modern Web

新新新手閱讀 Angular 文件30天系列 第 30

新新新手閱讀 Angular 文件 - pathMatch(4) - Day30

本文內容

本文內容為閱讀有關 Angular Route 的 pathMatch 設定的筆記內容。

空白路徑設定 (path: '')

之前有關紀錄 pathMatch 的筆記內容,橫跨了 prefix, full 和 redirect 這幾種設定和行為。
今天,要來記錄一下有關 path 設定為''時的行為。

空白路徑的比對機制

當path: '' 時,它符合任何路由片段,且它不會"消耗"當下被比對的路由片段。
什麼意思呢? 讓我們來舉個範例吧
[Route - 路由設定]

const routes: Routes = [
  {
    path: '',
    children: [
      {
        path: 'users',
        component: UsersComponent,
      }
    ]
  },
  {
    path: 'users',
    component: CounterUsersComponent,
  },
];

假設我們今天的比對路徑是 /users
那它先遇到的第一個 Route 物件的路由設定為 path:'',承如上面所說的比對機制,它符合任何被比對路由的片對,所以,過關。
接下來,我們有提到空白的路由不會消耗被比對路由片段,所以~~~~~ 現在的被比對路由路徑還是保持在 /users 的內容。
所以,我們就用 /users 來比對它的子路由路徑設定 path: 'users',而且它的 pathMatch 是 prefix ,只需符合當下片段,也剛好被比對路由只有 /users,users === users,故最終被渲染到畫面上的元件內容是 UsersComponent。

搭配 pathMatch:full 和 redirectTo 使用

現在我們將 pathMatch:full 和 redirectTo 跟 path: ''混用
[Route - 路由設定]

const routes: Routes = [
  {
    path: 'login',
    component: loginComponent
  },
  {
    path: '',
    pathMatch: 'full'
    redirectTo: 'login'
  },
  {
    path: 'users',
    component: usersComponent
  }
];

假設被比對的路徑是 http://localhost:4200/,那我們來比對一下上面的路由設定
第一關,path: 'login',login !== '',不符合。
第二關,path: '',空白路徑可以符合所以路由片段且不消耗它,所以,過關。
而且 pathMatch:full 的比對策略要一次較符合所有的路徑,但現在的路徑也是空白路徑,所以,過關。
接著,它有 redirectTo: 'login',故路由會被轉換到 http://localhost:4200/login ,最終是 loginComponent 的元件內容會被渲染到畫面上。

空白路徑和 redirectTo 造成的路由循環錯誤

上面的範例,如果我們將 path: '' 的位置拉到 path: 'login' 的上面,讓空白路徑的設定變成第一個,而 path: '' 的設定又可以符合任何路由片段,然後,又被 redirectTo 重新導向路由,讓路由比對的流程不段的重頭開始比對,但是,第一關就又遇到 path: '',導致這種無限輪迴的路由問題,這要特別注意喔~

path: '**' 萬用路由

當 path 設定為 '**' 它可以符合任何路由路徑,不管它的 pathMatch 設定是不是 full,都是完全符合,什麼意思呢?
寫個例子
[Route 設定]

const route: Route = [
  {
    path: 'login',
    component: loginComponent
  },
  {
    path: '**',
    redirectTo: 'login'
  }
]

當比對路徑為 /users/Johnny/permission,它遇到
第一關 path: 'login',而它的 pathMatch 是 prefix,所以,它必須符合當下的路由片段,login !== users,不符合。
第二關,path: '**',它可以符合任何的路由,所以,也不用分割被比對路由路徑了,過關。所以,路由會因為 redirectTo 被導引到 login,最終,是 loginComponent 元件的內容會被渲染到畫面上囉。

那也因為 path:'**' 這個萬用路由的特性,若它搭配 rediretTo 的話,我們也要避免無限路由迴圈的問題喔。

Summary

做個總結

  1. path:'' 可以符合任何被比對路由路徑的片段,而且不會消耗被比對路由路徑的片段。
  2. path:'**' 可以直接符合整個被比對路由路徑。
  3. 以上兩個路由的設定都要避免無線路由迴圈的問題。

Reference

  1. Introduce about Angular Route pathMatch Setting
  2. Angular Route API - officailDoc

上一篇
新新新手閱讀 Angular 文件 - pathMatch(3) - Day29
系列文
新新新手閱讀 Angular 文件30天30

尚未有邦友留言

立即登入留言