涉及选项卡和根页面的离子路由不起作用

Question

我正在 Ionic 4 中开发应用程序并卡在涉及选项卡的路由中。我有一个登录页面、客户页面和一个包含 3 个选项卡的选项卡页面。当用户第一次加载应用程序时，他会登录并在成功登录后转到客户端页面。从下次使用条件路由开始，我将他带到客户页面。但是进入客户页面后出现了奇怪的情况。我在 ion-item 上有一个点击功能，应该将他导航到选项卡页面，但出乎意料的是它没有导航。这是相同的代码。

我的应用程序路由文件：

const routes: Routes = [
  // {
  //   path: '',
  //   loadChildren: () => import('./client/client.module').then( m => m.ClientPageModule)
  // },
  {
    path: 'tabs/tab1',
    loadChildren: () => import('./tabs/tabs.module').then(m => m.TabsPageModule),
    // canActivate: [IsAuthenticated]
  },
  {
    path: 'tabs/tab2',
    loadChildren: () => import('./tabs/tabs.module').then(m => m.TabsPageModule),
    // canActivate: [IsAuthenticated]
  },
  {
    path: 'login',
    loadChildren: () => import('./login/login.module').then( m => m.LoginPageModule),
    // canActivate: [IsNotAuthenticated]
  },
  {
    path: 'signup',
    loadChildren: () => import('./signup/signup.module').then( m => m.SignupPageModule),
    // canActivate: [IsAuthenticated]
  },
  {
    path: 'permissions',
    loadChildren: () => import('./permissions/permissions.module').then( m => m.PermissionsPageModule),
    // canActivate: [IsNotAuthenticated]
  },
  {
    path: 'otp-verification',
    loadChildren: () => import('./otp-verification/otp-verification.module').then( m => m.OtpVerificationPageModule),
    // canActivate: [IsNotAuthenticated]
  },
  {
    path: 'modal',
    loadChildren: () => import('./modal/modal.module').then( m => m.ModalPageModule),
    // canActivate: [IsAuthenticated]
  },
  {
    path: 'update-profile-data',
    loadChildren: () => import('./update-profile-data/update-profile-data.module').then( m => m.UpdateProfileDataPageModule),
    // canActivate: [IsAuthenticated]
  },
  {
    path: 'client',
    loadChildren: () => import('./client/client.module').then( m => m.ClientPageModule)
  }

];

app.component.ts

if(userResponse["user_name"]) {
  this.router.navigateByUrl('/client');
} else {
  this.router.navigateByUrl('/login');
}

client.page.ts

 // function called when an existig client is selected from the list
  _clientSelected(clientSelected) {
    let clientData: NavigationExtras = {
      state: {
        client: clientSelected
      }
    };
    this.router.navigate(['tabs/tab1'], clientData);
  }

tabs-routing.module.ts

const routes: Routes = [
  {
    path: 'tabs',
    component: TabsPage,
    children: [
      {
        path: 'tab1',
        children: [
          {
            path: '',
            loadChildren: () =>
              import('../tab1/tab1.module').then(m => m.Tab1PageModule)
          }
        ]
      },
      {
        path: 'tab2',
        children: [
          {
            path: '',
            loadChildren: () =>
              import('../tab2/tab2.module').then(m => m.Tab2PageModule)
          }
        ]
      },
      {
        path: 'tab3',
        children: [
          {
            path: '',
            loadChildren: () =>
              import('../tab3/tab3.module').then(m => m.Tab3PageModule)
          }
        ]
      },
      {
        path: '',
        redirectTo: '/tabs/tab1',
        pathMatch: 'full'
      }
    ]
  },
  {
    path: '',
    redirectTo: '/tabs/tab1',
    pathMatch: 'full'
  }
];

请帮我解决这个错误。提前致谢！

Answer 1

确保在客户端页面或根目录下使用 ion-router-outlet 而不是 router-outlet
这可能会解决问题