Angular多个非嵌套路由共用同一懒加载模块的路由匹配问题

Angular 懒加载功能模块的路由为相对路径匹配，会自动拼接在指向该模块的父路由路径之后。你当前主路由已经将完整的search/:query、category/:category、tag/:tag作为父路径指向ArchivesModule，模块内部再配置相同路径就会出现路径叠加的问题，因此只有访问domain.com/category/:cat/category/:cat这类拼接路径才能命中路由。

这里提供两种常用实现方案，你可以根据业务场景选择：

方案1：保留主路由路径配置，通过canMatch守卫区分子模块路由 #

该方案无需调整对外暴露的访问路径，也不会影响其他根路由的匹配逻辑：

1. 先修改主路由配置，给每个路由新增data参数标识路由类型：

{
  path: 'search/:query',
  loadChildren: () => import('src/pages/archives.module').then(m => m.ArchivesModule),
  data: { routeType: 'search' }
},
{
  path: 'category/:category',
  loadChildren: () => import('src/pages/archives.module').then(m => m.ArchivesModule),
  data: { routeType: 'category' }
},
{
  path: 'tag/:tag',
  loadChildren: () => import('src/pages/archives.module').then(m => m.ArchivesModule),
  data: { routeType: 'tag' }
}

2. 修改ArchivesModule的路由配置，将路径均设为空，通过canMatch守卫根据父路由的标识匹配对应组件：

// 先定义通用匹配逻辑
const matchRouteType = (type: string) => {
  return (route: ActivatedRouteSnapshot) => route.parent?.data['routeType'] === type;
}

const routes: Routes = [
  {
    path: '',
    component: SearchComponent,
    resolver: SearchResolver,
    canMatch: [() => matchRouteType('search')]
  },
  {
    path: '',
    component: CategoryComponent,
    resolver: CategoryResolver,
    canMatch: [() => matchRouteType('category')]
  },
  {
    path: '',
    component: TagComponent,
    resolver: TagResolver,
    canMatch: [() => matchRouteType('tag')]
  }
]

方案2：调整主路由配置，将子路径下放至功能模块 #

如果你的Archives模块下只有这三个路由，没有其他根路径路由冲突的场景，可以用更简单的配置方式：

1. 主路由只保留指向懒加载模块的空路径配置：

{
  path: '',
  loadChildren: () => import('src/pages/archives.module').then(m => m.ArchivesModule)
}

2. ArchivesModule直接保留你原本的路由配置即可，无需额外修改。

注意：该方案需要将该路由配置放在所有根路由的最后，避免优先级更高覆盖其他业务路由。

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