iT邦幫忙

2021 iThome 鐵人賽

DAY 29
0
Modern Web

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

新新新手閱讀 Angular 文件 - pathMatch(3) - Day29

本文內容

本文內容為閱讀與 Angular 的 pathMatch:fullredirectTo 相關的內容筆記。

pathMatch:full

在 Angular 的官方文件對這個設定的說明,為以下這段話

The path-match strategy 'full' matches against the entire URL.

以上這段話的意思是,在 pathMatch:full 的設定下,該路由規則要符合整個 url 路徑。

Example1

ok,我們將昨天的 route 設定內容,加入 pathMatch:full 的設定,再一步一步解析路由
[Route 設定]

const routes: Routes = [
  {
    path: 'users',
    pathMatch: 'full',
    children: [
      {
        path: 'authority',
        component: customersAuthorityComponent,
      },
      {
        path: ':customerID',
        children: [
          {
            path: 'comments',
            component: customerCommentsComponent,
          },
          {
            path: 'permission',
            component: customerPermissionComponent,
          },
        ],
      },
    ],
  },
];

上面的內容,我只有特別擷取出,最後的部分,因為,其他的路徑比對都是不符合的。
好,接下來就用以上的路由設定,來比對。
首先,要被比對的路徑為 /users/Johnny/permission,接著,第一關是 users,但是,要特別注意我們在這一關就加入了 pathMatch:full 的設定,那就代表路由要符合全部的路由 url,
所以,/users !== /users/Johnny/permission ,不過關。

Example2

接著,改寫一下上面的路由設定
[Route 設定]

const routes: Routes = [
  {
    path: 'users/:customerID',
    pathMatch: 'full',
    children: [
      {
        {
          path: 'comments',
          component: customerCommentsComponent,
        },
        {
          path: 'permission',
          component: customerPermissionComponent,
        },
      },
    ],
  },
];

可以看到第一關是 /users/:customerID ,但是,它有 pathMatch: 'full' 的設定,所以,必須要一次就符合全部的被比對路由,結果為 /users/:customerID !== /users/Johnny/permission ,不過關。

Example3

[Route 設定]

const routes: Routes = [
  {
    path: 'users',
    children: [
      {
        path: 'authority',
        component: customersAuthorityComponent,
      },
      {
        path: ':customerID',
        pathMatch: 'full',
        children: [
          {
            path: 'comments',
            component: customerCommentsComponent,
          },
          {
            path: 'permission',
            component: customerPermissionComponent,
          },
        ],
      },
    ],
  },
];

好,來解析一下,
被比對路徑為 /users/Johnny/permission
遇到第一關,path:users,它的 pathMatch 設定為 prefix,所以,被比對路徑被拆成三段,第一段是 users,所以, users === users,過關。
接下來第二關,path:customerID,整體的被比對路徑剩下 /Johnny/permission,雖然動態路由是可以符合任何內容,但是,在這一關有加入 pathMatch:full的設定,所以,它必須要符合剩下的全部的路徑,最終,:customerID !== /Johnny/permission ,不過關。

ok,以上就是當路由的比對策略為 pathMatch:full 的解析過程。

redirectTo

接下來講一下當遇到, redirectTo 的時候的路由行為。
redirectTo 只要其所處的路由規則符合被比對路由路徑的片段,就會被重新導向 redirectTo 指定的路由中。

跟 pathMatch:prefix 混用

所以,當某個路由路徑的比對策略為 pathMatch:prefix ,且它也有設定 redirectTo 的內容,那就代表若當下的貝比對路由路徑的片段符合此路由的 path 設定,就會立即被重新導向 redirectTo 設定的路由,不會再往下比對了。
舉個範例吧
[Route 設定]
假設被比對的路徑是 /users/Johnny/permission

const routes: Routes = [
  {
    path: 'login',
    component: loginComponent,
  },
  {
    path: 'users',
    redirectTo: 'login',
  },
  {
    path: 'users/:userID',
    children: [
      {
        path: 'comments',
        component: UserCommentsComponent,
      },
      {
        path: 'articles',
        component: UserArticlesComponent,
      },
    ],
  },
];

接下來,進行解析
第一個 /login,是不符合的,所以,不過關。
接下來第二個,path:users,它的 pathMatch 是 prefix,所以,users === users ,過關,而且它又有 redirectTo: 'login' 設定,所以,當下的路由會立即被重新導向 /login 不會再往下比對了。
最終,是 loginComponent 元件的內容會被渲染到畫面上。

跟 pathMatch:full 混用

改寫一下上面的範例

const routes: Routes = [
  {
    path: 'login',
    component: loginComponent,
  },
  {
    path: 'users',
    pathMatch: 'full',
    redirectTo: 'login',
  },
  {
    path: 'users/:userID',
    children: [
      {
        path: 'comments',
        component: UserCommentsComponent,
      },
      {
        path: 'permission',
        component: UserPermissionComponent,
      },
    ],
  },

被比對路徑一樣是 /users/Johnny/permission
首先,
第一關是 /login 不符合,所以,不過關。
第二關是 /users,它的 pathMatch 是 full,所以,它必須要一次完全符合被比對路徑,最終 /users !== /users/Johnny/permission ,所以,不過關,就算它有 redirectTo 設定,也是一樣不過關。由此可以看出來 pathMatch:full 的順位是比 redirectTo 還高的喔。

第三關,
首先是 users/:userID,它的 pathMatch 是 prefix,所以,就一個片段一個片段來。
它有動態路由 :userID ,所以,可以符合任何值,我們可以得到 /users/:userID === /uers/Johnny
接下來,剩 /permission,那就來比對它的子路由,第一個 comments 不符合,換下一個 permission,過關!!!
所以,這個路由最終是 UserPermissionComponent 會被渲染到畫面上。

Summary

這邊做個總結吧

  1. pathMatch:full 的比對策略為要一次就符合當下路徑的所有內容,不會被拆成一段一段的比對。
  2. redirectTo 搭配 pathMatch:prefix 的設定,會產生,只下當下被比對路徑的片段符合該路由的設定,就會立即被導轉到 redirectTo 設定的路由中。
  3. redirectTo 搭配 pathMatch:full 的設定,因為 pathMatch:full 順位比 redirectTo 還高,所以,只要當下的路由設定沒有符合被比對路徑的所有內容,就還是一樣不過關。

上一篇
新新新手閱讀 Angular 文件 - Router - pathMatch(2) - Day28
下一篇
新新新手閱讀 Angular 文件 - pathMatch(4) - Day30
系列文
新新新手閱讀 Angular 文件30天30

尚未有邦友留言

立即登入留言