Ionic登录后页面侧边菜单不显示问题排查与实现咨询

问题根因 #

侧边菜单无法正常显示是两个核心配置错误导致的：

• Ionic 框架要求<ion-menu>必须是<ion-app>的直接子节点，你将菜单放在业务模块的PagesPage组件中，该组件由顶层路由出口渲染，菜单被嵌套在路由出口内部，框架无法全局识别到菜单实例。
• Pages路由模块配置错误，没有将PagesPage作为业务页面的父布局容器，根路径直接重定向到home页面，导致你写在PagesPage中的菜单和内部路由出口根本没有被挂载渲染。

修复步骤 #

1. 调整全局根组件模板 #

将侧边菜单移到app.component.html中，作为<ion-app>的直接子节点，和主路由出口平级，通过登录状态控制菜单显隐，避免登录页露出菜单：

<ion-app>
  <!-- 全局侧边菜单，仅登录状态渲染 -->
  <ion-menu *ngIf="authService.isLoggedIn" contentId="main-content" type="overlay">
    <ion-content>
      <ion-list id="inbox-list">
        <ion-list-header>{{ 'appName' | translate }}</ion-list-header>
        <ion-note>{{ authService.currentUser?.email }}</ion-note>

        <ion-menu-toggle auto-hide="false" *ngFor="let p of appPages">
          <ion-item routerDirection="root" [routerLink]="[p.url]" lines="none" detail="false" routerLinkActive="selected">
            <ion-icon slot="start" [ios]="p.icon + '-outline'" [md]="p.icon + '-outline'"></ion-icon>
            <ion-label>{{ p.title | translate }}</ion-label>
          </ion-item>
        </ion-menu-toggle>

        <ion-menu-toggle auto-hide="false">
          <ion-item (click)="logout()" lines="none" detail="false">
            <ion-icon slot="start" ios="log-out-outline" md="log-out-outline"></ion-icon>
            <ion-label>{{ 'logout.label' | translate }}</ion-label>
          </ion-item>
        </ion-menu-toggle>
      </ion-list>
    </ion-content>
  </ion-menu>
  <!-- 主路由出口，id与菜单contentId完全一致 -->
  <ion-router-outlet id="main-content"></ion-router-outlet>
</ion-app>

原来写在PagesPage中的菜单逻辑（appPages配置、菜单点击事件、退出登录方法）全部移到app.component.ts中，authService是你项目中存储登录状态的服务，直接引入使用即可。

2. 修正Pages模块路由配置 #

将PagesPage设置为所有业务页面的父布局容器，业务页面全部作为子路由挂载，路由守卫只需要在父路由添加一次，子路由会自动继承，不需要重复配置：

// pages-routing.module.ts
const routes: Routes = [
  {
    path: '',
    component: PagesPage,
    ...canActivate(redirectUnauthorizedToLogin),
    children: [
      { path: '', redirectTo: 'home', pathMatch: 'full' },
      {
        path: 'home',
        loadChildren: () => import('./home/home.module').then(m => m.HomePageModule)
      },
      {
        path: 'appointments',
        loadChildren: () => import('./appointments/appointments.module').then(m => m.AppointmentsPageModule)
      },
      {
        path: 'customers',
        loadChildren: () => import('./customers/customers.module').then(m => m.CustomersPageModule)
      }
    ]
  }
];

注意：子路由重定向路径不要加前缀/，使用相对路径即可。

3. 精简PagesPage模板 #

菜单已经移到全局根组件，PagesPage只需要保留嵌套路由出口用于渲染子业务页面即可，删除原来写的菜单代码：

<!-- pages.page.html -->
<ion-router-outlet></ion-router-outlet>

4. 业务页添加菜单唤起按钮 #

在所有需要唤起侧边菜单的业务页面（首页、预约页、客户页）的导航栏中添加菜单按钮，点击即可打开侧边栏：

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title>{{ 页面标题 | translate }}</ion-title>
  </ion-toolbar>
</ion-header>

补充说明 #

如果确实需要将菜单放在业务模块内部，必须使用MenuController手动注册菜单实例，同时保证菜单关联的contentId和对应路由出口id完全匹配，但这种方案容易出现页面切换后菜单失效、滑动唤起异常的问题，全局菜单+登录状态控制显隐是Ionic官方推荐的标准实现方式，稳定性最高。

内容的提问来源于stack exchange，提问作者Pablo Vallés Juliá