Ionic 里怎么让底部 tab 切换时保持页面状态不重新加载？

这问题我刚做 Ionic 项目的时候也踩过，折腾了两天才发现是个很坑的细节。

你的路由配置看着没问题，问题大概率出在子模块的路由配置上。

检查一下你的 home.module.ts 或者 home-routing.module.ts，子页面的路由 path 必须是空字符串，不能写具体的路径名。

错误写法：

const routes: Routes = [

  {

    path: 'home',  // 错误！这里不能写 'home'

    component: HomePage

  }

];

正确写法：

const routes: Routes = [

  {

    path: '',  // 必须是空字符串

    component: HomePage

  }

];

因为父路由已经定义了 path: 'home'，子模块里再写一遍就会导致路由匹配出问题，每次切换都认为是新页面。

另外还有个常见坑，检查你的 tabs.page.html，确保 tab 链接用的是相对路径：

  

    

      

      首页

    

    

      

      我的

    

  

注意 tab="home" 这个属性要和路由配置里的 path 对上，别写成 routerLink="/tabs/home" 这种，那样会绕过 Ionic 的缓存机制。

改完这两处应该就好了，别走弯路去折腾什么 keepContents 或者自己实现状态管理，Ionic 本身就支持页面缓存，只是路由配置不对导致没生效。

你这个配置本身没问题，问题出在 ion-tabs 的缓存机制上——它默认只缓存页面实例，但 Angular 的路由默认是「销毁重建」模式，所以每次切 tab 都会重新走构造函数。

关键点是：ion-tabs 的 keepContents 只能防止 DOM 被删，但 Angular 的路由组件还是会重新实例化。想真正保持状态，得让 Angular 的路由复用组件实例。

解决方案是用 RouteReuseStrategy 自定义一个「复用策略」，让 tab 页面不被销毁：

先写个复用策略类，比如叫 TabReuseStrategy.ts：

import { ActivatedRouteSnapshot, DetachedRouteHandle, RouteReuseStrategy } from '@angular/router';



export class TabReuseStrategy implements RouteReuseStrategy {



  private cachedRoutes = new Map();



  shouldDetach(route: ActivatedRouteSnapshot): boolean {

    // 只缓存 tab 页面（路径包含 'tabs' 的）

    return route.routeConfig?.path?.includes('tabs') ?? false;

  }



  store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void {

    const path = this.getPath(route);

    this.cachedRoutes.set(path, handle);

  }



  shouldAttach(route: ActivatedRouteSnapshot): boolean {

    const path = this.getPath(route);

    return this.cachedRoutes.has(path);

  }



  retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle | null {

    const path = this.getPath(route);

    return this.cachedRoutes.get(path) ?? null;

  }



  shouldReuseRoute(future: ActivatedRouteSnapshot, current: ActivatedRouteSnapshot): boolean {

    return future.routeConfig === current.routeConfig;

  }



  private getPath(route: ActivatedRouteSnapshot): string {

    // 用完整路径作为 key，避免重复 tab 导致混淆

    return route.routeConfig?.path ?? '';

  }

}

然后在 app-routing.module.ts 里注册它：

providers: [

  {

    provide: RouteReuseStrategy,

    useClass: TabReuseStrategy

  }

]

注意：如果你用的是 lazy-loaded 模块（你这确实是），这个策略能正常工作；但如果是 eager-loaded（直接 import），可能得稍微改下 getPath 的逻辑——不过你这配置没问题。

这样配完，切换 tab 就不会重新初始化组件了，滚动位置、输入内容都能保留。
不过有个小坑：如果页面里用到了 ionViewWillEnter 之类的生命周期，得确认它是否还被触发——因为组件没销毁，这些钩子可能不按预期走，必要时得手动调用 ionViewWillEnter（比如在 tab 切换事件里）。

另外，别再加 keepContents 了，它在 Ionic 6+ 已经废弃了，官方也建议用上面这种策略。

这样更清晰。