本文内容

接续，Day27 的内容，纪录阅读有关 Angular Route 的 pathMatch:prefix 设定内容。

Default (Prefix) path matching strategy

在昨天的文章中，有提到过 pathMatch 设定值有两个，一个是 prefix，另一个是 full。预设值为 prefix。

prefix 暧昧的字义

prefix 这个字本身是前缀词的意思，我一开始看到这个设定的时候，很容易误以为，是不是该路由设定只要符合被比对路由路径的 "前面" 某个部分，就算符合呢?
但...其实不是，在 pathMatch:prefix 的设定下，代表要完全符合被比对路由路径，才算符合。
什麽意思呢，还记得昨天被解析出来的被比对路由路径的内容吗? /users/Johnny/permission，代表要完全符合这个路径内容，才算符合喔，缺一不可。

开始比对~

好，解释完 pathMatch:prefix 的比对机制之後，我就拿被比对路由路径 /users/Johnny/permission 为对象，并用下列的 route 设定来进行比对
[Route 设定]

const routes: Routes = [
  {
    path: 'products',
    children: [
      {
        path: ':productID',
        component: ProductComponent,
      },
    ],
  },
  {
    path: ':other',
    children: [
      {
        path: 'ramble',
        component: rambleComponent,
      },
    ],
  },
  {
    path: 'user',
    component: userComponent,
  },
  {
    path: 'users',
    children: [
      {
        path: 'authority',
        component: customersAuthorityComponent,
      },
      {
        path: ':customerID',
        children: [
          {
            path: 'comments',
            component: customerCommentsComponent,
          },
          {
            path: 'permission',
            component: customerPermissionComponent,
          },
        ],
      },
    ],
  },
];

ok，可以看到上面的路由设定都没有特别写出 pathMatch 的设定内容，那它的设定就是预设值 prefix。

step1. 拆分路由
Angular 在比对路径的时候，会把它拆分成一部分一部分，然後依序比对，所以，这边的被比对路径为 /users/Johnny/permissions，那它就会被拆成三等份，
一 - users
二 - Johnny
三 - permissions
由上到下，依序比对它们。

step2. 开始比对
ok，拆分完之後，就开始比对吧。
首先，比对 users
第一个 route 物件的 path 是 products，而 products !== users ，所以，这个不符合，下面一位~~

第二个 route 物件的 path 是 :other ，这个前面有接 : 的路由是动态路由，所以，它可以是任何值，所以，过关。
接着，比对它的子路由 path 是 ramble。它跟被比对路由的第二个部分 Johnny 不一样，所以，这个不符合。

第三个 route 物件的 path 是 user，而 user !== users ，所以，这个不符合。

第四个 route 物件的 path 是 users，过关。
再来它的第一个子路由 path 是 authority ，这个不符合。
换下一个子路由 path 是 :customerID ，它是动态路由，所以可以接受任何值，所以，过关。
最後，再进它的子路由 path 是 comments，这个不符合。换另一个子路由 path 是 permission，过关 !!!!

所以，经过以上的重重重重的比对之後，我们知道，是最後一组的 route 物件的路由路径设定内容与被比对路由路径完全相同，所以，最後，会被渲染到画面上的元件内容为 customerPermissionComponent。

Summary

来做个总结

1. Anuglar 会把比对的路由拆解成好几份，然後，依序比对每一个部分。
2. 当 pathMatch:prefix 时，要完全符合整个路由路径，才能判定该路由规则完全符合。