Ionic/Angular同页面双用户类型跳转场馆详情页加载异常问题

你遇到的问题本质是Angular路由的匹配规则导致的，Angular路由采用自上而下的优先匹配逻辑，discover/:artistId 和 discover/:venueId 对路由系统来说结构完全一致（都是discover路径后接一个动态参数），参数名的差异不会被路由识别为不同路径，因此所有discover/[ID]格式的跳转请求都会命中排在前面的艺人详情路由，永远不会触发场馆详情的路由配置，这就是点击场馆卡片加载艺人模板的核心原因。

最简洁的修复方式是给两类详情路由增加不同的路径前缀做区分，步骤如下：

1. 修改tabs-routing.module.ts中的路由配置

const routes: Routes = [
  {
    path: '',
    component: TabsPage,
    children: [
      {
        path: 'tab1',
        children: [
          {
            path: '',
            loadChildren: () => import('../tab1/tab1.module').then(m => m.Tab1PageModule)
          },
          // 艺人详情路由增加artist前缀
          {
            path: 'discover/artist/:artistId',
            loadChildren: () => import('../tab1/discover/artist-details/artist-details.module').then(m => m.ArtistDetailsPageModule)
          },
          // 场馆详情路由增加venue前缀
          {
            path: 'discover/venue/:venueId',
            loadChildren: () => import('../tab1/discover/venue-details/venue-details.module').then(m => m.VenueDetailsPageModule)
          }
        ]
      }
    ]
  }
]

2. 修改场馆卡片的routerLink配置，匹配新的路由规则

<ion-card
*ngFor="let venue of relevantVenue.slice(1)"
fill="clear"
[routerLink]="['/','tabs','tab1','discover','venue',venue.id]"
>

3. 同步修改艺人卡片的routerLink配置，增加artist路径段即可，原有参数获取逻辑不需要调整。

改完后两类跳转路径就有了明确区分，不会再出现路由匹配错乱的问题。

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