Ionic单账号双profile场景下点击场馆卡片错误跳转艺人页求助

问题原因 #

• Angular路由采用从上到下的优先级匹配规则，当前tabs-routing.module.ts中配置的tab4/:artistId和tab4/:venueId路径结构完全一致，系统无法通过路径区分传入的ID属于艺人还是场馆，所有符合tab4/[任意参数]格式的请求都会优先匹配到排在前面的艺人详情路由，因此点击场馆卡片也会错误跳转至艺人详情页。
• 两类卡片的跳转路由配置未做区分，艺人、场馆卡片的routerLink均为['/','tabs','tab4','tab4',id]，没有给路由传递足够的类型标识。

修复方案 #

方案1（推荐：易维护、可读性高） #

第一步：调整路由配置，给两类详情路径添加类型前缀

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

path: 'tab4',
children: [
  {
    path: '',
    loadChildren: () => import('../tab4/tab4.module').then(m => m.Tab4PageModule)
  },
  {
    path: 'artist/:artistId',
    loadChildren: () => import('../tab4/my-artist/my-artist.module').then(m => m.MyArtistPageModule)
  },
  {
    path: 'venue/:venueId',
    loadChildren: () => import('../tab4/my-venue/my-venue.module').then(m => m.MyVenuePageModule)
  },
]

第二步：修改卡片跳转路由，匹配新路径

修改tab4.page.html中两类卡片的routerLink配置：

• 艺人卡片调整为：

[routerLink]="['/','tabs','tab4','artist',artist.id]"

• 场馆卡片调整为：

[routerLink]="['/','tabs','tab4','venue',venue.id]"

方案2（不修改路径结构的兼容方案） #

如果需要保留原有路径结构，可以为路由添加自定义匹配器，或者在ID对应的详情入口页先根据ID查询资源类型，再渲染对应艺人/场馆组件。该方案改造成本更高，适合路径不能改动的存量业务场景。

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