Question

所以我使用的是Ionic Tabs模板（Ionic 4），我在路由方面确实遇到了麻烦。

基本上，我有一个info标签。这导致了InfoPage。在此页面中，我有一个项目列表，当我单击某个项目时，我想使用信息插座在item-info页面中更深入地浏览页面。

所以我想我必须在info.module.ts内设置一条路由。看起来像这样：

const routes: Routes = [
  {
    path: '',
    component: InfoPage,
    pathMatch: 'full'
  },
  {
    path: 'item',
    component: ItemInfoPage
  }
];

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

使用URL http://localhost:8101/tabs/(info:info)进入我的信息选项卡页面，我以为http://localhost:8101/tabs/(info:info)/item会进入我的item-info页面。但是我只是被重定向回http://localhost:8101/tabs/(info:info)。

这是我的tabs.router.module.ts

const routes: Routes = [
  {
    path: 'tabs',
    component: TabsPage,
    children: [
      {
        path: '',
        redirectTo: '/tabs/(home:home)',
        pathMatch: 'full',
      },
      {
        path: 'home',
        outlet: 'home',
        component: HomePage
      },
      {
        path: 'info',
        outlet: 'info',
        component: InfoPage
      },
      {
        path: 'about',
        outlet: 'about',
        component: AboutPage
      },
      {
        path: 'contact',
        outlet: 'contact',
        component: ContactPage
      }
    ]
  },
  {
    path: '',
    redirectTo: '/tabs/(home:home)',
    pathMatch: 'full'
  }
];

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

这是我的tabs.module.ts

@NgModule({
  imports: [
    IonicModule,
    CommonModule,
    FormsModule,
    TabsPageRoutingModule,
    HomePageModule,
    AboutPageModule,
    ContactPageModule,
    InfoPageModule,
    ItemInfoPageModule
  ],
  declarations: [TabsPage]
})
export class TabsPageModule {}

还有另一个问题：为什么我必须使用路由tabs/(info:info)，为什么tabs/info不起作用？我将路径指定为info，为什么它不能这样工作？

编辑：

第二种可能可行但不适合我的方法：

const routes: Routes = [
  {
    path: 'tabs',
    component: TabsPage,
    children: [
      {
        path: '',
        redirectTo: '/tabs/(home:home)',
        pathMatch: 'full',
      },
      {
        path: 'home',
        outlet: 'home',
        component: HomePage
      },
      {
        path: 'info',
        outlet: 'info',
        component: InfoPage,
        children: [
          { path: 'item', outlet: 'info', component: ItemInfoPage}
        ]
      },
      {
        path: 'about',
        outlet: 'about',
        component: AboutPage
      },
      {
        path: 'contact',
        outlet: 'contact',
        component: ContactPage
      }
    ]
  },
  {
    path: '',
    redirectTo: '/tabs/(home:home)',
    pathMatch: 'full'
  }
];

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

Answer 1

每条儿童路线都应置于儿童财产下。在您的情况下，您声明信息页面的路由为/tabs/info，并且当您尝试访问路径/tabs/yourVariable/info时，您已被重定向，因为该路径不存在。 tabs/info是静态路径，而/tabs/:info是动态路径。第二点的区别不在info url，而在/tabs/iaminsanevariable，例如路由器参数info = iaminsanevariable。

const routes: Routes = [
  {
    path: 'tabs',     
    children: [
      {
        path: ':home',
        component: TabsPage,
        children: [
         { path: 'info',
           outlet: 'info',
           component: InfoPage }
        ]
      },
      ...
    ]
  }
 ...
];

使用嵌套插座无法路由到嵌套页面/组件

1 个答案: