Ionic Angular侧边菜单如何实现仿Tabs页面首次访问后保持加载状态

Ionic Tabs的页面保活能力和PreloadAllModules预加载策略完全无关，预加载只是提前拉取懒加载的JS模块，不会缓存已经创建的页面组件实例。常规根路由跳转时，根层<ion-router-outlet>会把非当前路由对应的组件直接销毁，和侧边菜单配置、预加载配置没有关系。
Tabs能保活的核心逻辑是嵌套独立路由出口：外层tab容器不会跳转，所有tab页的切换都在内层专属的路由出口完成，非激活的页面会被Ionic自动缓存到DOM中，不会被销毁。 #

可落地实现步骤 #

1. 新增壳路由容器，对齐Tabs的嵌套结构 #

不要把侧边菜单对应的4个业务页面直接挂在根路由下，先创建一个空的Shell壳页面，承担和Tabs组件完全一样的容器作用。
首先改造app-routing.module.ts，把原来的独立业务路由挪到壳路由下：

const routes: Routes = [
  {
    path: '',
    redirectTo: 'map',
    pathMatch: 'full'
  },
  {
    path: '',
    // 加载壳页面模块
    loadChildren: () => import('./shell/shell.module').then(m => m.ShellPageModule)
  },
  // 其余不需要保活的独立页面（如登录页、详情页）继续保留在根路由下即可
];

2. 迁移侧边菜单与路由出口到壳页面 #

把原来根组件里的侧边菜单、主内容区路由出口全部移到Shell页面的模板中，shell.page.html结构参考：

<!-- 侧边菜单绑定壳页面内的主路由出口 -->
<ion-menu contentId="main-content">
  <ion-content>
    <ion-list>
      <!-- 原侧边菜单的导航项原样保留，仅移除多余的routerDirection="root"属性 -->
      <ion-menu-toggle auto-hide="false">
        <ion-item routerLink="/map" lines="none" detail="false" routerLinkActive="selected">
          <ion-icon slot="start" name="map-sharp"></ion-icon>
          <ion-label>Map</ion-label>
        </ion-item>
        <ion-item routerLink="/routes" lines="none" detail="false" routerLinkActive="selected">
          <ion-icon slot="start" name="navigate-circle-sharp"></ion-icon>
          <ion-label>Routes</ion-label>
        </ion-item>
        <ion-item routerLink="/couriers" lines="none" detail="false" routerLinkActive="selected">
          <ion-icon slot="start" name="car-sharp"></ion-icon>
          <ion-label>Couriers</ion-label>
        </ion-item>
        <ion-item routerLink="/deliveries" lines="none" detail="false" routerLinkActive="selected">
          <ion-icon slot="start" name="pin-sharp"></ion-icon>
          <ion-label>Deliveries</ion-label>
        </ion-item>
      </ion-menu-toggle>
    </ion-list>
  </ion-content>
</ion-menu>

<!-- 壳页面专属的内层路由出口，所有业务页面都在内层出口完成切换 -->
<ion-router-outlet id="main-content"></ion-router-outlet>

3. 把业务页面路由迁移到壳页面的子路由中 #

编辑shell-routing.module.ts，把原来4个业务页面的路由全部改成Shell的子路由：

const routes: Routes = [
  {
    path: '',
    component: ShellPage,
    children: [
      {
        path: 'map',
        loadChildren: () => import('./map/map.module').then(m => m.MapPageModule)
      },
      {
        path: 'routes',
        loadChildren: () => import('./routes/routes.module').then(m => m.RoutesPageModule)
      },
      {
        path: 'couriers',
        loadChildren: () => import('./couriers/couriers.module').then(m => m.CouriersPageModule)
      },
      {
        path: 'deliveries',
        loadChildren: () => import('./deliveries/deliveries.module').then(m => m.DeliveriesPageModule)
      }
    ]
  }
];

注意事项 #

• 必须移除导航项上原来带的routerDirection="root"，否则会触发根路由出口的切换逻辑，把Shell容器整体销毁，缓存直接失效。
• 这套结构实现的保活效果和Tabs完全一致：页面首次加载完成后，切走再切回时，ngOnInit不会重复执行，组件内的变量状态、DOM内容都会完整保留，不需要引入任何第三方缓存插件。
• 从保活的业务页面跳转根路由下的独立详情页时，正常写跳转逻辑即可，返回时不会破坏Shell容器的页面缓存。

内容的提问来源于stack exchange，提问作者Daniel T.