Angular6 如何使用Angular Router在Ionic 4中导航到带有选项卡的页面？

我刚刚使用Ionic CLI和tabs模板创建了一个Ionic 4应用程序。我最大的问题是如何从根登录页面（没有选项卡）导航到主页（有选项卡），并在底部显示选项卡

我的

应用程序路由.module.ts

，如下所示：

const routes: Routes = [
  { path: '', loadChildren: './login/login.module#LoginPageModule' },
  { path: 'tabs', loadChildren: './tabs/tabs.module#TabsPageModule' }
];

在成功登录后，我在我的

login.page.ts

上执行以下命令：

this.router.navigate(['tabs']);

我还更改了

tabs.router.module.ts

上最后一个对象的

路径

属性：

  {
    path: '/tabs',
    redirectTo: '/tabs/(home:home)',
    pathMatch: 'full'
  }

const routes: Routes = [
  { path: '', loadChildren: './tabs/tabs.module#TabsPageModule' },
  { path: 'login', loadChildren: './login/login.module#LoginPageModule' }
];

---

但是，在运行时，导航到选项卡页面后，它只显示主页，而在应用程序底部没有任何选项卡。

我实际上找到了一个解决方案：

tabs.router.module.ts

中的const routers上的最后一个对象应该重定向到login，如下所示：

  {
    path: '',
    redirectTo: '/login',
    pathMatch: 'full'
  }

然后，只需在

app routing.module.ts

中将选项卡保留为root rout即可：

  {
    path: '/tabs',
    redirectTo: '/tabs/(home:home)',
    pathMatch: 'full'
  }

const routes: Routes = [
  { path: '', loadChildren: './tabs/tabs.module#TabsPageModule' },
  { path: 'login', loadChildren: './login/login.module#LoginPageModule' }
];