本文内容

本文内容为阅读与 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 还高，所以，只要当下的路由设定没有符合被比对路径的所有内容，就还是一样不过关。