如何创建 Angular 的路由 pathMatch 无限循环？答案

【问题标题】：How to create the Angular's route pathMatch endless loop?如何创建 Angular 的路由 pathMatch 无限循环？
【发布时间】：2020-01-21 07:53:46
【问题描述】：

阅读docs我到达了Route接口的pathMatch属性。这里说：

路径匹配策略，'prefix' 或 'full' 之一。默认为 '前缀'。

默认情况下，路由器会从左侧检查 URL 元素是否 URL 匹配给定路径，并在匹配时停止。为了例如，'/team/11/user' 匹配 'team/:id'。

路径匹配策略“完整”匹配整个 URL。这是在重定向空路径路由时这样做很重要。否则，因为空路径是任何 URL 的前缀，路由器将应用即使导航到重定向目的地，重定向，创建一个无限循环。

我做了一个测试来创建这个循环。对于这两个路径，如果我在空路径页面上加载单次 ProductListComponent 组件：没有循环。

{ path: 'list', component: ProductListComponent },
{ path: '', redirectTo: 'list', pathMatch: 'prefix' }

我的测试有问题吗？这个循环实际上是什么样子的？也许我误解了它？

【问题讨论】：

标签： angular routes

【解决方案1】：

问题是你在说：

{ path: '', component: MainLayoutComponent, pathMatch: 'prefix'}

这基本上是说：

找到任何以无 ('') 开头的 url，简单地说，所有 url 总是以无开头。

考虑这个网址/google

或者这个网址

如果您运行正则表达式并说这些 url 是否匹配 ''？，是的。

更多信息请查看this question，

关于前缀pathMatche的重要更新：

const appRoutes: Routes = [
  { path: 'crisis-center', component: CrisisListComponent },
  { path: 'heroes',        component: HeroListComponent },
  { path: '',   redirectTo: '/heroes', pathMatch: 'full' },
  { path: '**', component: PageNotFoundComponent }
];

从技术上讲，pathMatch = 'full' 当 URL 中剩余的不匹配段匹配 '' 时会导致路由命中。在此示例中，重定向位于顶级路由中，因此剩余的 URL 和整个 URL 是相同的。

另一个可能的 pathMatch 值是 'prefix'，它告诉路由器在剩余 URL 以重定向路由的前缀路径开头时匹配重定向路由。

不要在这里这样做。如果 pathMatch 值为 'prefix'，则每个 URL 都将匹配 ''。

尝试将其设置为“前缀”，然后单击“转到 sidekicks”按钮。请记住，这是一个错误的 URL，您应该会看到“找不到页面”页面。相反，您仍然在“英雄”页面上。在浏览器地址栏中输入错误的 URL。您会立即重新路由到 /heroes。符合此路由定义的每个 URL，无论好坏，都将是一个匹配项。

只有当整个 url 为 '' 时，默认路由才应该重定向到 HeroListComponent。请记住将重定向恢复为 pathMatch = 'full'。

通过Victor Savkin's post on redirects了解更多信息。

【讨论】：