前端新人上來想問一下,關於路由的問題

各位好,第一次發問,如有缺失請多多包含。

事情是這樣的,公司買了一個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
但是都跑不到設計的網頁,請問各位高手該如何做?

所以你的程式碼是什麼?

我的第一層

const routes: Routes = [

  {

    path: 'herolist',

    component: HerolistComponent,

  },

  {

    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: 'tpfd',

    loadChildren: () => import('app/tpfd/tpfd.module')

      .then(m => m.TpfdModule),

  },

  { 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: TpfdComponent,

    children: [

      {

        path: 'tpfd06',

        loadChildren: () => import('./tpfd06/tpfd06.module')

        .then(m => m.Tpfd06Module),

      },

      {

        path: 'tpfd10',

        loadChildren: () => import('./tpfd10/tpfd10.module')

        .then(m => m.Tpfd10Module),

      },

    ],

  },

];

@NgModule({

  imports: [RouterModule.forChild(routes)],

  exports: [RouterModule],

})

export class TpfdRoutingModule { }

第三層

const routes: Routes = [

  {

    path: '',

    component: Tpfd06Component,

    children: [

      {

        path: 'tpfd06010000',

        component: Tpfd06010000Component,

        children: [

          {

            path: '',

            redirectTo: 'tab1',

            pathMatch: 'full',

          },

          {

            path: 'tab1',

            component: Tpfd06010000Tab1Component,

          },

          {

            path: 'tab2',

            component: Tpfd06010000Tab2Component,

          },

        ],

      },

    ],

  },

];

@NgModule({

  imports: [RouterModule.forChild(routes)],

  exports: [RouterModule],

})

export class Tpfd06RoutingModule { }

看起來還好…到這邊弄一個簡單的完整範例吧
https://stackblitz.com/