12.9 - 路由懒加载

• 路由懒加载是以模块为单位的。
• 创建用户模块 ng g m user —routing 一并创建该模块的路由模块
• 创建登录页面组件 ng g c user/login
• 创建注册页面组件 ng g c user/register

  配置用户模块的路由规则

  ```typescript // src/app/user/user.module.ts import { NgModule } from ‘@angular/core’; import { RouterModule, Routes } from ‘@angular/router’; import { LoginComponent } from ‘./login/login.component’; import { RegisterComponent } from ‘./register/register.component’;

const routes: Routes = [ { path: “login”, component: LoginComponent }, { path: “register”, component: RegisterComponent } ];

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

export class UserRoutingModule { }

<a name="D6lXh"></a>
### 将用户路由模块关联到主路由模块
```typescript
// src/app/app-routing.module.ts
const routes: Routes = [
    {
        path: "user",
        // loadChildren 懒加载路由模块
        loadChildren: () => import("./user/user.module").then(m => m.UserModule)
    }
]

在导航组件中添加访问链接

<a routerLink="/user/login">登录</a>
<a routerLink="/user/register">注册</a>