ionic 5选项卡将选项卡重定向到特定页面

时间:2020-05-12 15:33:36

标签: ionic-framework ionic4 ionic5

我的应用程序中有5个标签。我要从中自动将第5个标签重定向到应用程序中的页面。即,当用户点击tab5时,他应被重定向到名为carts

的页面

我在第5个标签的儿童路径中添加了购物车页面,并尝试重定向。但是什么也没发生。 第5个标签未重定向到购物车页面

这是代码

app.routing.module

{
    path: '',
    loadChildren: () => import('./pages/tabbar/tabbar.module').then( m => m.TabbarPageModule)
  },

tabbar.routing.module

{
    path: 'tabs',
    component: TabbarPage,
    children : [
      {
        path: 'tab1',
        loadChildren: () => import('../tab1/tab1.module').then( m => m.Tab1PageModule)
      },
      {
        path: 'tab2',
        loadChildren: () => import('../tab2/tab2.module').then( m => m.Tab2PageModule)
      },

      {
        path: 'tab3',
        loadChildren: () => import('../tab3/tab3.module').then( m => m.Tab3PageModule)
      },

      {
        path: 'tab4',
        loadChildren: () => import('../tab4/tab4.module').then( m => m.Tab4PageModule)
      },

      {
        path: 'tab5',
        loadChildren: () => import('../tab5/tab5.module').then( m => m.Tab5PageModule),
      },

      {
        path: '',
        redirectTo: '/tabs/tab1',
        pathMatch: 'full'
      }
    ]
  },
  {
    path: '',
    redirectTo: '/tabs/tab1',
    pathMatch: 'full'
  }

tab5.routing.module

{
    path: '',
    component : Tab5Page,
    children : [

      {
        path : 'carts',
        loadChildren : () => import('../carts/carts.module').then(m => m.CartsPageModule)
      },

      {
        path : '',
        redirectTo : '/tab5/carts',
        pathMatch : 'full'
      }
    ]
  },

  {
    path : '',
    redirectTo : '/tab5/carts',
    pathMatch : 'full'
  }

1 个答案:

答案 0 :(得分:1)

您能只删除Tabs5Page并直接在Tab 5的路由中加载CartsPage吗?

{
    path: 'tabs',
    component: TabbarPage,
    children : [
      {
        path: 'tab1',
        loadChildren: () => import('../tab1/tab1.module').then( m => m.Tab1PageModule)
      },
      {
        path: 'tab2',
        loadChildren: () => import('../tab2/tab2.module').then( m => m.Tab2PageModule)
      },

      {
        path: 'tab3',
        loadChildren: () => import('../tab3/tab3.module').then( m => m.Tab3PageModule)
      },

      {
        path: 'tab4',
        loadChildren: () => import('../tab4/tab4.module').then( m => m.Tab4PageModule)
      },

      {
        path: 'tab5',
        loadChildren : () => import('../carts/carts.module').then(m => m.CartsPageModule)
      },

      {
        path: '',
        redirectTo: '/tabs/tab1',
        pathMatch: 'full'
      }
    ]
  },
  {
    path: '',
    redirectTo: '/tabs/tab1',
    pathMatch: 'full'
  }