各位好，第一次發問，如有缺失請多多包含。
事情是這樣的，公司買了一個angular套版
其中關於套版的路由，有三層路由，第一層路由結構如下
const routes: Routes = [
{
path: 'pages',
canActivate: [AuthGuard],
loadChildren: () => import('app/pages/pages.module')
.then(m => m.PagesModule),
},
{
path: 'auth',
loadChildren: () => import('app/@auth/auth.module')
.then(m => m.AuthModule),
},
{ path: '', redirectTo: 'pages', pathMatch: 'full' },
{ path: '**', redirectTo: 'pages' },
];
const config: ExtraOptions = {
useHash: false,
};
@NgModule({
imports: [RouterModule.forRoot(routes, config)],
exports: [RouterModule],
})
export class AppRoutingModule {
}
第二層路由結構如下
const routes: Routes = [{
path: '',
component: PagesComponent,
children: [
{
path: 'dashboard',
component: ECommerceComponent,
},
{
path: 'iot-dashboard',
component: DashboardComponent,
},
{
path: 'users',
loadChildren: () => import('./users/users.module')
.then(m => m.UsersModule),
},
{
path: 'layout',
loadChildren: () => import('./layout/layout.module')
.then(m => m.LayoutModule),
},
{
path: 'forms',
loadChildren: () => import('./forms/forms.module')
.then(m => m.FormsModule),
},
{
path: 'ui-features',
loadChildren: () => import('./ui-features/ui-features.module')
.then(m => m.UiFeaturesModule),
},
{
path: 'modal-overlays',
loadChildren: () => import('./modal-overlays/modal-overlays.module')
.then(m => m.ModalOverlaysModule),
},
{
path: 'extra-components',
loadChildren: () => import('./extra-components/extra-components.module')
.then(m => m.ExtraComponentsModule),
},
{
path: 'maps',
loadChildren: () => import('./maps/maps.module')
.then(m => m.MapsModule),
},
{
path: 'charts',
loadChildren: () => import('./charts/charts.module')
.then(m => m.ChartsModule),
},
{
path: 'editors',
loadChildren: () => import('./editors/editors.module')
.then(m => m.EditorsModule),
},
{
path: 'tables',
loadChildren: () => import('./tables/tables.module')
.then(m => m.TablesModule),
},
{
path: 'miscellaneous',
loadChildren: () => import('./miscellaneous/miscellaneous.module')
.then(m => m.MiscellaneousModule),
},
{
path: '',
redirectTo: 'dashboard',
pathMatch: 'full',
},
{
path: '**',
component: NotFoundComponent,
},
],
}];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})
export class PagesRoutingModule {
}
第三層路由結構如下
const routes: Routes = [{
path: '',
component: LayoutComponent,
children: [
{
path: 'stepper',
component: StepperComponent,
},
{
path: 'list',
component: ListComponent,
},
{
path: 'infinite-list',
component: InfiniteListComponent,
},
{
path: 'accordion',
component: AccordionComponent,
},
{
path: 'tabs',
component: TabsComponent,
children: [
{
path: '',
redirectTo: 'tab1',
pathMatch: 'full',
},
{
path: 'tab1',
component: Tab1Component,
},
{
path: 'tab2',
component: Tab2Component,
},
],
},
],
}];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})
export class LayoutRoutingModule {
}
我想仿造此結構，在此路由下另外創造一個資料夾及路由，有試著建立component和router
但是都跑不到設計的網頁，請問各位高手該如何做?