12.2 - 快速上手

创建页面组件 Layout 组件以及 Navigation 组件，供路由使用

• 创建 首页 页面组件 ng g c pages/home
• 创建 关于 页面组件 ng g c pages/about

  创建路由规则

  ```typescript import { NgModule } from ‘@angular/core’; import { RouterModule, Routes } from ‘@angular/router’; import { AboutComponent } from ‘./pages/about/about.component’; import { HomeComponent } from ‘./pages/home/home.component’;

const routes: Routes = [ { path: “home”, component: HomeComponent }, { path: “about”, component: AboutComponent } ];

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

export class AppRoutingModule { }

<a name="mgHG3"></a>
### 引入路由模块并启动
```typescript
// src/app/app.module.ts
import { AppRoutingModule } from './app-routing.module';
@NgModule({
    // 声明当前模块依赖了哪些其他模块
    imports: [
        AppRoutingModule
    ],
})

添加路由插座

<!-- 路由插座即占位组件 匹配到的路由组件将会显示在这个地方 -->
<router-outlet></router-outlet>

在导航组件中定义链接

<a routerLink="/home">首页</a>
<a routerLink="/about">关于我们</a>