Question

这是站点信息路由模块

const routes: Routes = [
{
  path: '', children: [
    {
      path: '',
      component: WhyUsComponent
    },
    {
      path: '',
      component: WhoWeAreComponent
    },
    {
      path: '',
    component: WhatWeDoComponent
    }
  ]
}
];

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

下面是应用程序路由模块。问题是所有路由的routerLink都转到了site-info模块中的第一个组件，这就是为什么。如果我在应用程序路由模块中将路径保留为空，而在site-info-routing模块的相应路径中添加“我们是谁和我们一起工作的原因”，那么它可以正常工作，但这是最好的方法管理吗？

{ 
         path: 'why-us',
         loadChildren: './site-info/site-info.module#SiteInfoModule',

        },
     { 
     path: 'who-we-are',
     loadChildren: './site-info/site-info.module#SiteInfoModule',

    },
     { 
     path: 'what-we-do',
     loadChildren: './site-info/site-info.module#SiteInfoModule',

    }

Answer 1

您实际上没有在延迟加载的模块中链接您的路由。

const routes: Routes = [
{
  path: '', 
  children: [
    {
      path: '',
      redirectTo: 'why-us',
      pathMatch: 'full'
    {
      path: 'why-us',
      component: WhyUsComponent
    },
    {
      path: ''who-we-are',
      component: WhoWeAreComponent
    },
    {
      path: 'what-we-do',
    component: WhatWeDoComponent
    }
  ]
}
];

以及主要的路由模块：

{ 
    path: 'site-info',
    loadChildren: './site-info/site-info.module#SiteInfoModule'
},

Answer 2

这表明只要获得路径why-us就会加载SiteInfoModule

{
        path: '',
        redirectTo: 'why-us',<=== deafult loading path 
        pathMatch: 'full',
    },
  { 
         path: 'why-us',
         loadChildren: './site-info/site-info.module#SiteInfoModule',

        },
     { 
     path: 'who-we-are',
     loadChildren: './site-info/site-info.module#SiteInfoModule',

    },
     { 
     path: 'what-we-do',
     loadChildren: './site-info/site-info.module#SiteInfoModule',

    }

之后，在加载模块并在下面加载相应的路由模块时：-

但是，由于您为所有组件输入了空路径，因此您没有指定要立即加载的组件。

所以最好在这里也提供一些路径：-

const routes: Routes = [
{
  path: '', 
  children: [
    {
      path: '',  <=== default path can be empty
      component: WhyUsComponent
    },
    {
      path: 'whoweare',
      component: WhoWeAreComponent
    },
    {
      path: 'whatwedo',
    component: WhatWeDoComponent
    }
  ]
}
];

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

如何在一个延迟加载模块中管理多条路由

2 个答案: