12 Route

12.1 Overview

在 Angular 中，路由是以模块为单位的，每个模块都可以有自己的路由。

12.2 快速上手

1. 创建页面组件、Layout 组件以及 Navigation 组件，供路由使用
2. 创建首页页面组件 ng g c pages/home
3. 创建关于我们页面组件 ng g c pages/about
4. 创建布局组件 ng g c pages/layout

5. 创建导航组件 ng g c pages/navigation

6. 创建路由规则

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';


const routes: Routes = [
  {
    path: "home",
    component: HomeComponent
  },
  {
    path: "about",
    component: AboutComponent
  }

];

3. 引入路由模块并启动

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';


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

4. 添加路由插座

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

5. 在导航组件中定义链接

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