Android 在ionic 4中创建侧菜单时出错。错误：无法匹配任何路由

我是爱奥尼亚的新手。 我想在我的应用程序中创建一个侧菜单

应用程序组件.ts

if (localStorage.getItem('userData')) {
      this.router.navigate(['/menu']);
    } else{
      this.router.navigate(['']);
    }

const routes: Routes = [
  {
    path: 'menu',
    component: MenuPage,
    children: [
      {
        path: 'tabs',
        loadChildren: () => import('../tabs/tabs.module').then(m => m.TabsPageModule)
      },
      {
        path: 'change-password',
        loadChildren: () => import('../change-password/change-password.module').then(m => m.ChangePasswordPageModule)
      }
    ]
  },
  {
    path: '',
    redirectTo: '/menu/tabs'
  }
];

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    RouterModule.forChild(routes)
  ],
  declarations: [MenuPage]
})
export class MenuPageModule { }

export class MenuPage implements OnInit {
 pages = [
    {
      title: 'Home',
      url: '/menu/tabs',
      icon: 'home'
    },
    {
      title: 'Change Password',
      url: '/menu/change-password',
      icon: 'lock'
    }
  ];
  selectPath = '';
  constructor(private router: Router) { 
    this.router.events.subscribe((event: RouterEvent) => {
      this.selectPath = event.url;
    });
  }

  ngOnInit() {
  }

}

import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  {
    path: '',
    loadChildren: () => import('./login/login.module').then( m => m.LoginPageModule)
  },
  {
    path: 'tabs',
    loadChildren: () => import('./tabs/tabs.module').then(m => m.TabsPageModule)
  },
  {
    path: 'menu',
    loadChildren: () => import('./menu/menu.module').then( m => m.MenuPageModule)
  },
  {
    path: '',
    loadChildren: () => import('./tabs/tabs.module').then(m => m.TabsPageModule)
  }
];
@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule {}  

菜单.模块.ts

if (localStorage.getItem('userData')) {
      this.router.navigate(['/menu']);
    } else{
      this.router.navigate(['']);
    }

const routes: Routes = [
  {
    path: 'menu',
    component: MenuPage,
    children: [
      {
        path: 'tabs',
        loadChildren: () => import('../tabs/tabs.module').then(m => m.TabsPageModule)
      },
      {
        path: 'change-password',
        loadChildren: () => import('../change-password/change-password.module').then(m => m.ChangePasswordPageModule)
      }
    ]
  },
  {
    path: '',
    redirectTo: '/menu/tabs'
  }
];

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    RouterModule.forChild(routes)
  ],
  declarations: [MenuPage]
})
export class MenuPageModule { }

export class MenuPage implements OnInit {
 pages = [
    {
      title: 'Home',
      url: '/menu/tabs',
      icon: 'home'
    },
    {
      title: 'Change Password',
      url: '/menu/change-password',
      icon: 'lock'
    }
  ];
  selectPath = '';
  constructor(private router: Router) { 
    this.router.events.subscribe((event: RouterEvent) => {
      this.selectPath = event.url;
    });
  }

  ngOnInit() {
  }

}

import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  {
    path: '',
    loadChildren: () => import('./login/login.module').then( m => m.LoginPageModule)
  },
  {
    path: 'tabs',
    loadChildren: () => import('./tabs/tabs.module').then(m => m.TabsPageModule)
  },
  {
    path: 'menu',
    loadChildren: () => import('./menu/menu.module').then( m => m.MenuPageModule)
  },
  {
    path: '',
    loadChildren: () => import('./tabs/tabs.module').then(m => m.TabsPageModule)
  }
];
@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule {}  

菜单.page.ts

if (localStorage.getItem('userData')) {
      this.router.navigate(['/menu']);
    } else{
      this.router.navigate(['']);
    }

const routes: Routes = [
  {
    path: 'menu',
    component: MenuPage,
    children: [
      {
        path: 'tabs',
        loadChildren: () => import('../tabs/tabs.module').then(m => m.TabsPageModule)
      },
      {
        path: 'change-password',
        loadChildren: () => import('../change-password/change-password.module').then(m => m.ChangePasswordPageModule)
      }
    ]
  },
  {
    path: '',
    redirectTo: '/menu/tabs'
  }
];

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    RouterModule.forChild(routes)
  ],
  declarations: [MenuPage]
})
export class MenuPageModule { }

export class MenuPage implements OnInit {
 pages = [
    {
      title: 'Home',
      url: '/menu/tabs',
      icon: 'home'
    },
    {
      title: 'Change Password',
      url: '/menu/change-password',
      icon: 'lock'
    }
  ];
  selectPath = '';
  constructor(private router: Router) { 
    this.router.events.subscribe((event: RouterEvent) => {
      this.selectPath = event.url;
    });
  }

  ngOnInit() {
  }

}

import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  {
    path: '',
    loadChildren: () => import('./login/login.module').then( m => m.LoginPageModule)
  },
  {
    path: 'tabs',
    loadChildren: () => import('./tabs/tabs.module').then(m => m.TabsPageModule)
  },
  {
    path: 'menu',
    loadChildren: () => import('./menu/menu.module').then( m => m.MenuPageModule)
  },
  {
    path: '',
    loadChildren: () => import('./tabs/tabs.module').then(m => m.TabsPageModule)
  }
];
@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule {}  

menu.page.html

<ion-split-pane contentId="content">
  <ion-menu contentId="content">
    <ion-header>
      <ion-toolbar>
        <ion-title>Menu</ion-title>
      </ion-toolbar>
    </ion-header>

    <ion-content full>

      <ion-list>
        <ion-menu-toggle auto-hide="false" *ngFor="let p of pages">
          <ion-item [routerLink]="p.url" routerDirection="root" [class.active-item]="selectPath === p.url">
            <ion-icon [name]="p.icon" class="margin"></ion-icon>
            {{p.title}}
          </ion-item>
        </ion-menu-toggle>
      </ion-list>

    </ion-content>
  </ion-menu>

  <ion-router-outlet id="content" main></ion-router-outlet>
</ion-split-pane> 

我得到一个错误：

错误：未捕获（承诺中）：错误：无法匹配任何路由。URL段：“菜单/选项卡”
错误：无法匹配任何路由。URL段：“菜单/选项卡”

---

在menu.module.ts中，将路径“menu”更改为路径：“”。按照您所做的方式，路线应该是菜单/菜单/选项卡。如果将其更改为“”，它将具有预期的行为：菜单/选项卡

path: '',
component: MenuPage,

---

你能制造一场闪电战吗？