Ionic 5 路由报错：迁移路由至tabs-routing模块后无法匹配对应路由

报错根因 #

你遇到的ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'booth-product-list'报错，是迁移路由时没有匹配Ionic tabs的嵌套路由规则导致的，核心有两个疏漏：

• 直接把新增路由放在tabs-routing.module.ts的顶层，和tabs路由节点同级，没有挂在tabs的children子路由数组下
• 跳转时传的路径没有带上tabs路由的固定前缀，和实际配置的路由路径不匹配

正确配置步骤 #

1. 调整tabs-routing.module.ts的路由嵌套结构 #

Ionic默认生成的tabs组件，所有要复用底部标签栏的页面，都必须作为tabs父路由的子路由存在，不能和tabs路由同级。完整的路由配置参考如下：

const routes: Routes = [
  {
    // 原有tabs根路径保持不变
    path: 'tabs',
    component: TabsPage,
    children: [
      // 项目原有tab页路由保持不动
      {
        path: 'tab1',
        loadChildren: () => import('../tab1/tab1.module').then(m => m.Tab1PageModule)
      },
      {
        path: 'tab2',
        loadChildren: () => import('../tab2/tab2.module').then(m => m.Tab2PageModule)
      },
      // 将两个新增页面放在tabs的children数组内，作为子路由存在
      {
        path: 'booth-product-list',
        loadChildren: () => import('../booth-product-list/booth-product-list.module').then(m => m.BoothProductListPageModule)
      },
      {
        path: 'booth-detail-list',
        loadChildren: () => import('../booth-detail-list/booth-detail-list.module').then(m => m.BoothDetailListPageModule)
      }
    ]
  },
  // 原有默认重定向规则保持不变
  {
    path: '',
    redirectTo: 'tabs/tab1',
    pathMatch: 'full'
  }
];

注意：不要把新增路由放在tabs-routing.module.ts的顶层和tabs路径同级。这种配置下路由解析时会跳过tabs组件的渲染逻辑，既会触发路由找不到的报错，也无法复用底部标签栏的DOM结构。

2. 修正页面跳转的路径规则 #

因为两个新增页面的完整路径已经变成了/tabs/xxx的结构，之前tab1.page.ts里写的跳转路径缺失了tabs前缀，需要同步修正：

goToBooth(){
    console.log("clicked goToBooth");
    // 补上tabs路径前缀，匹配嵌套路由规则
    this.navCtrl.navigateForward('/tabs/booth-product-list');
}

配置完成后，跳转后的页面会复用TabsPage的DOM容器渲染，自然就会保留底部标签栏的显示效果，不会像独立顶层路由那样替换掉整个页面结构。

3. 容易遗漏的校验项 #

• 检查app-routing.module.ts，删掉之前配置的两个页面的顶层路由，避免路由优先级冲突导致的渲染异常
• 不要在children数组的路由path里加前导斜杠（比如不要写成path: '/booth-product-list'），否则会打破嵌套路由的层级匹配规则
• 如果用routerLink做页面跳转，路径也要和navCtrl保持一致，即写成[routerLink]="'/tabs/booth-product-list'"，不要直接写不带前缀的路径

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