IONIC 5（Angular）侧边菜单项跳转自定义页面保留菜单图标问题求助

问题根因 #

• 使用/folder/页面名称格式跳转时：Ionic默认侧边菜单模板的folder路径绑定的是官方默认的通用UI组件页，路由参数仅作为内容标识，不会切换渲染组件，因此所有跳转都只会显示通用页；该路由配置为根布局子路由，继承了AppComponent内的菜单组件，因此菜单图标正常显示。
• 使用/pages/页面名称格式跳转时：新增的pages页面路由配置为一级路由，未嵌套在带侧边菜单的根路由子节点下，页面渲染时不会加载根布局的菜单组件，因此菜单图标消失，仅能显示页面自定义内容。

修复步骤 #

1. 调整路由配置
   打开app-routing.module.ts，将所有自定义pages页面的路由添加到根路由的children数组中，与默认的folder路由平级，示例配置如下：

const routes: Routes = [
  {
    path: '',
    component: AppComponent,
    children: [
      // 原有默认folder路由，可保留或删除
      {
        path: 'folder/:id',
        loadChildren: () => import('./folder/folder.module').then(m => m.FolderPageModule)
      },
      // 新增自定义pages页面路由
      {
        path: 'pages/:pageName',
        loadChildren: () => import('./pages/your-page/your-page.module').then(m => m.YourPagePageModule)
      },
      // 其余自定义页面路由依次添加
    ]
  }
];

2. 修改菜单项配置
   在app.component.ts的菜单项数组中，将跳转url统一修改为/pages/对应页面名称格式，匹配路由配置。
3. 检查页面头部配置
   确保每个自定义pages页面的ion-header内已添加菜单按钮组件，示例代码如下：

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

验证方法 #

重启开发服务后点击侧边栏菜单项，可正常跳转对应自定义页面，左上角菜单图标正常显示且点击可呼出侧边栏即修复完成。

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