Ionic Angular Tabs路由报错：无法匹配tabs/tab1/discover/a1路由如何解决？

问题根因 #

1. 路由路径不匹配：Discover.page.html中配置的跳转路径为/tabs/tab1/discover/{id}，但tabs-routing.module.ts里tab1的子路由未定义discover层级，直接配置了根路径下的动态参数路由，多出来的discover路径段导致匹配失败。
2. 动态路由冲突：同层级同时定义path: ':artistId'和path: ':venueId'两个无区分度的动态参数路由，Angular路由匹配时无法识别参数类型，只会永远匹配第一个定义的路由。
3. 根路由缺失tabs路径：App-routing.module.ts中没有配置根路径下的tabs路由加载规则，跳转使用的/tabs前缀路径没有对应的路由入口。

修复步骤 #

1. 调整tabs路由配置，新增discover层级、区分两类详情路由

修改tabs-routing.module.ts的tab1子路由配置：

const routes: Routes = [
  {
    path: '',
    component: TabsPage,
    children: [
      {
        path: 'tab1',
        children: [
          {
            path: '',
            loadChildren: () => import('../tab1/tab1.module').then(m => m.Tab1PageModule)
          },
          // 新增discover层级，通过前缀区分艺人、场地路由
          {
            path: 'discover/artist/:artistId',
            loadChildren: () => import('../tab1/discover/artist-details/artist-details.module').then(m => m.ArtistDetailsPageModule)
          },
          {
            path: 'discover/venue/:venueId',
            loadChildren: () => import('../tab1/discover/venue-details/venue-details.module').then(m => m.VenueDetailsPageModule)
          }
        ]
      },
      // 其余tab路由保持原有配置不变
    ]
  }
];

2. 修改卡片跳转路由

修改Discover.page.html里的routerLink配置，艺人卡片对应跳转艺人路由：

<!-- 艺人卡片跳转配置 -->
[routerLink]="['/','tabs','tab1','discover','artist', artist.id]"
<!-- 如果是场地卡片，将路径中的artist替换为venue即可 -->

3. 补全App路由的tabs入口

在App-routing.module.ts中新增tabs路由配置，匹配跳转的/tabs前缀路径：

const routes: Routes = [
  // 可按需调整默认跳转路径，比如默认跳转到tabs
  { path: '', redirectTo: 'tabs', pathMatch: 'full' },
  { path: 'auth', loadChildren: () => import('./auth/auth.module').then(m => m.AuthPageModule) },
  // 新增tabs路由配置
  {
    path: 'tabs',
    loadChildren: () => import('./tabs/tabs.module').then(m => m.TabsPageModule),
    canLoad: [AuthGuard]
  },
  {
    path: 'places',
    loadChildren: () => import('./places/places.module').then(m => m.PlacesPageModule),
    canLoad: [AuthGuard]
  },
  {
    path: 'bookings',
    loadChildren: () => import('./bookings/bookings.module').then(m => m.BookingsPageModule),
    canLoad: [AuthGuard]
  }
];

如果你的tabs实际是嵌套在places路由下的，把跳转路径里的/tabs前缀替换为/places即可。

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