Question

我有一个带有选项卡和登录页面的离子应用程序。选项卡组件是其自己的模块，并且每个选项卡都有一个路由模块，每个选项卡是其自己的模块。加载应用程序后，我想定向到登录页面，然后在登录后重定向到选项卡组件之外的一个选项卡选项卡（菜单/主页）。

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

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { TabsPage } from './tabs.page';

const routes: Routes = [
  {
    path: 'menu',
    component: TabsPage,
    children: [
      {
        path: 'home',
        loadChildren: () => import('./home/home.module').then(m => m.HomePageModule)
      },
      {
        path: 'library',
        loadChildren: () => import('./library/library.module').then(m => m.LibraryPageModule)
      },
      {
        path: 'search',
        loadChildren: () => import('./search/search.module').then(m => m.SearchPageModule)
      },
      {
        path: 'profile',
        loadChildren: () => import('./profile/profile.module').then(m => m.ProfileModule)
      },
      {
        path: '',
        redirectTo: 'menu/home',
        pathMatch: 'full'
      }
    ]
  },
  {
    path: '',
    redirectTo: '/menu/home',
    pathMatch: 'full'
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class TabsPageRoutingModule {}

Answer 1

将您的标签页路由更改为：-

const routes: Routes = [
  {
    path: 'menu',
    children: [
      {
        path: '',
        component: TabsPage
      },
      {
        path: 'home',
        loadChildren: () => import('./home/home.module').then(m => m.HomePageModule)
      },
      {
        path: 'library',
        loadChildren: () => import('./library/library.module').then(m => m.LibraryPageModule)
      },
      {
        path: 'search',
        loadChildren: () => import('./search/search.module').then(m => m.SearchPageModule)
      },
      {
        path: 'profile',
        loadChildren: () => import('./profile/profile.module').then(m => m.ProfileModule)
      },
      {
        path: '',
        redirectTo: 'menu/home',
        pathMatch: 'full'
      }
    ]
  },
  {
    path: '',
    redirectTo: '/menu/home',
    pathMatch: 'full'
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class TabsPageRoutingModule {}

OR

在TabsPage中放置一个路由器插座

要了解原因，请阅读：-https://link.medium.com/U5u4d4ub66

用loadchildren进行角延迟加载路由

1 个答案: