Angular 如何解决访问/catalog/test时的Cannot match any routes报错

当前配置的通配符路由写法未被正确识别，导致非精确匹配的catalog子路径没有命中规则，可通过以下几种方案解决：

方案一：嵌套通配子路由（推荐） #

Angular 路由匹配规则为：父路由匹配前缀后，剩余路径段需要由子路由承接。给catalog路由添加通配子路由即可覆盖所有子路径：

export const appRoutes: Routes = [
  {
    path: 'catalog',
    component: DiskComponent,
    children: [
      // 通配catalog下任意层级的子路径
      { path: '**', component: DiskComponent }
    ]
  }
]

如果DiskComponent模板中没有嵌套<router-outlet>，子路由组件不会额外渲染，不会出现重复渲染问题。

方案二：自定义路由匹配器 #

不想使用嵌套路由的话，可以通过自定义匹配器直接识别所有以catalog开头的URL，跳过子路由匹配逻辑：

import { Routes, UrlSegment, UrlMatchResult } from '@angular/router';

// 匹配规则：URL第一个路径段为catalog则命中
function catalogPathMatcher(url: UrlSegment[]): UrlMatchResult | null {
  return url[0]?.path === 'catalog' ? { matched: url } : null;
}

export const appRoutes: Routes = [
  {
    matcher: catalogPathMatcher,
    component: DiskComponent
  }
]

该写法会直接匹配所有首段为catalog的URL（包括/catalog、/catalog/test、/catalog/a/b/c等），加载DiskComponent，无需额外配置子路由。

方案三：子路径重定向（不保留原URL） #

如果不需要保留子路径的URL，仅要求所有catalog开头的路径能正常加载组件，可将所有子路径统一重定向到/catalog：

export const appRoutes: Routes = [
  { path: 'catalog', component: DiskComponent, pathMatch: 'full' },
  // 匹配所有catalog开头的路径，重定向到/catalog
  { path: 'catalog', redirectTo: '/catalog', pathMatch: 'prefix' }
]

该方式会将/catalog/test的URL自动修改为/catalog，需要保留原URL的话请使用前两种方案。

内容的提问来源于stack exchange，提问作者mr_blond