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
]
})