1. 创建路由模块

ng generate module app-routing --flat --module=app

2. 修改app-routing.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
// 引入路由模块
import { Routes, RouterModule } from '@angular/router';
// 引入被路由的组件
import {HomePageComponent} from './scence-station/home-page/home-page.component';
// 定义路由
const routes: Routes = [// 无路由时默认跳转路由{ path: '', redirectTo: '/homePage', pathMatch: 'full' },{ path: 'homePage', component: HomePageComponent },// 无匹配路由时默认路由{ path: '**', component: HomePageComponent }
];@NgModule({declarations: [],imports: [CommonModule,// 初始化路由模块，监听定义的路由RouterModule.forRoot(routes)],// 导出路由模块exports: [RouterModule]
})
export class AppRoutingModule { }

3. 创建路由出口

<router-outlet></router-outlet> 

4. 创建路由链接

<div><nav><a routerLink="/homePage">HomePage</a><!-- 带参数路由 --><a routerLink="/details/{{id}}">明细</a><a [routerLink]="['/details', id]">明细</a></nav>
</div>

5. 通过js路由

// 引入Router
import { Router } from '@angular/router';
...
// 注入router
constructor( private router: Router) { }
...
// 导航到路由
this.router.navigate(['details', id]);
// 多参数传递
this.router.navigate(['details'], {queryParams: {id: '1',type: 't'}
// 直接通过url导航
this.router.navigateByUrl('details/1');
...

6. 从路由中获取参数

// 引入Router
import { ActivatedRoute } from '@angular/router';
// 注入ActivatedRoute
constructor(  private activatedRoute: ActivatedRoute) {}
...
// 获取参数
this.activatedRoute.queryParams.subscribe(queryParams => {let id= queryParams.id;let type= queryParams.type;});

7. 返回上一页

import { Location } from '@angular/common';
constructor( private location: Location) {}
goBack(): void {this.location.back();
}