Angular 路由配置

1、生成路由文件

ng g module xxxRouting 简写 ng g m xxxRouting
生成代码示例：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

@NgModule({
  declarations: [],
  imports: [
    CommonModule
  ]
})
export class AppRoutingModule { }

2、引入路由模块

import { RouterModule, Routes } from ‘@angular/router’;

3、增加路由定义

子模块路由配置跟根模块配置一样

export const routes: Routes = [
  // entire URL, only when the entire URL matches '', so set the pathMatch value to 'full'
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  // redirectTo and children cannot be used together!
  { 
    path: '', 
    component: LayoutComponent,
    children: [
      {
        path: '', 
        // Lazy Loading route configuration
        loadChildren: () => import('./pages/pages.module').then(res => res.PagesModule)
      }
    ],
    // CanActivate: requiring authentication
    canActivate: [AuthGuard]
  },
  { path: 'login', component: LoginComponent },
  // define a wildcard route and have it navigate to a PageNotFoundComponent
  { path: '**', component: PageNotFoundComponent }
];

4、根路由配置路由

root module使用 forRoot, child module使用 forChild!

@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    RouterModule.forRoot(routes)
  ],
  exports: [RouterModule]
})
@NgModule({
  imports: [
    RouterModule.forChild(pagesRoutes)
  ],
  exports: [
    RouterModule
  ]
})

这篇好文章是转载于：学新通技术网