本文内容

本文内容为阅读有关 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