Ionic3升级Ionic6页面内嵌Tabs路由配置问题求解

之前两种方案失败的核心原因，是把Tab对应的子页面挂载到了全局顶层路由出口，切换路由时直接替换掉了整个FooPage，才会出现头部、Tab栏消失、资源加载路径错误的问题。按以下步骤配置即可实现需求：

路由配置修正 #

不要将guide、scan等Tab子页配置为FooPage的平级路由，也不要通过自定义路由策略截断路径，直接使用Angular原生嵌套路由，在FooPage的路由项下面配置子路由：

// 对应业务模块的路由文件或app-routing.module.ts
const routes: Routes = [
  {
    path: 'foo',
    component: FooPage,
    children: [
      {
        path: 'guide',
        loadChildren: () => import('./guide/guide.module').then(m => m.GuidePageModule)
      },
      {
        path: 'scan',
        loadChildren: () => import('./scan/scan.module').then(m => m.ScanPageModule)
      },
      {
        path: '',
        redirectTo: 'guide',
        pathMatch: 'full'
      }
    ]
  }
];

父页面模板调整 #

原有模板缺少嵌套路由对应的渲染出口，Tab子页没有渲染在Tabs组件内部，才会冲掉父页面内容。修改foo.html结构如下：

<ion-header>
  <!-- 保留原有头部代码，Tab切换时这部分不会被卸载重建 -->
</ion-header>

<ion-content>
  <ion-tabs>
    <!-- 必须内嵌ion-router-outlet，所有Tab子页只会渲染在该出口内，不会替换整个父页面 -->
    <ion-router-outlet></ion-router-outlet>
    
    <ion-tab-bar slot="bottom">
      <ion-tab-button tab="guide">
        <ion-icon md="map-sharp" ios="map"></ion-icon>
        <ion-label>Guide</ion-label>
      </ion-tab-button>
      <ion-tab-button tab="scan">
        <ion-icon name="barcode-sharp"></ion-icon>
        <ion-label>Scan</ion-label>
      </ion-tab-button>
    </ion-tab-bar>
  </ion-tabs>
</ion-content>

ChunkLoadError 修复 #

之前遇到的ion-virtual-scroll相关块加载错误，是Angular懒加载资源的基路径配置错误导致的。打开angular.json，找到项目build配置项，将baseHref和deployUrl配置为实际部署的路径：

• 部署在站点根路径时，两个参数都配置为/
• 部署在站点子路径时，配置为对应的子路径（例如部署在/app/路径下就填/app/）

不要留空或使用错误的相对路径，否则懒加载的代码块会以当前路由路径为基准查找，就会出现从/foo/xxx.js路径加载资源的问题。

配置注意事项 #

• 不要自定义UrlHandlingStrategy截断路由，会直接破坏Ionic基于Angular实现的嵌套路由关系，导致父页面被替换
• FooPage在首次进入时只会初始化一次，页面内的头部逻辑、共享状态不会随Tab切换销毁，Tab子页的生命周期仅在<ion-router-outlet>内部触发
• 路由配置中的空路径重定向规则，已经可以实现进入foo页面默认加载guide Tab的效果，不需要额外编写代码手动选中Tab

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