本文內容

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

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 還高，所以，只要當下的路由設定沒有符合被比對路徑的所有內容，就還是一樣不過關。