Angular 入坑记录的笔记第五篇，因为一直在加班的缘故拖了有一个多月，主要是介绍在 Angular 中如何配置路由，完成重定向以及参数传递。至于路由守卫、路由懒加载等“高级”特性，并不会在本篇文章中呈现
对应官方文档地址：
配套代码地址：angular-practice/src/router-tutorial
二、ContentsAngular 从入坑到挖坑 - 组件食用指南
Angular 从入坑到挖坑 - 表单控件概览
Angular 从入坑到挖坑 - HTTP 请求概览
Angular 从入坑到挖坑 - Router 路由使用入门指北
三、Knowledge Graph在 Angular 应用中，框架会自动将 index.html 文件中的 base url 配置作为组件、模板和模块文件的基础路径地址。默认的情况下 app 文件夹是整个应用的根目录，所以我们直接使用 index.html 中使用默认的 <base href='http://www.likecs.com/'> 即可
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>RouterTutorial</title> <base href="http://www.likecs.com/"> <meta content="width=device-width, initial-scale=1"> <link type="image/x-icon" href="http://www.likecs.com/favicon.ico"> </head> <body> <app-root></app-root> </body> </html> 4.1.2、路由的配置在 Angular 项目中，系统的路由需要我们将一个 url 地址映射到一个展示的组件，因此需要手动的去设置 url 与组件之间的映射关系
因为我们在使用 Angular CLI 创建项目时，选择了添加路由模组，因此我们可以直接在 app-routing.module.ts 文件中完成路由的定义。最终我们定义的路由信息，都会在根模块中被引入到整个项目
import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; import { HomeComponent } from './components/home/home.component'; import { PagenotfoundComponent } from './components/pagenotfound/pagenotfound.component'; import { NewsComponent } from './components/news/news.component'; import { ProductComponent } from './components/product/product.component'; // 配置路由信息 const routes: Routes = [ { path: 'home', component: HomeComponent }, { path: '', redirectTo: 'home', pathMatch: 'full' }, { path: 'news', component: NewsComponent }, { path: 'product', component: ProductComponent }, { path: '**', component: PagenotfoundComponent }, ]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule { } import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppRoutingModule } from './app-routing.module'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, AppRoutingModule // 引入路由配置信息 ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }当定义好路由信息后，我们需要在页面上使用 <router-outlet> 标签来告诉 Angular 在何处渲染出页面。对于路由之间的跳转，我们可以在 a 标签上通过使用 RouterLink 指令来绑定具体的路由来完成地址的跳转
<div> <a [routerLink]="[ '/news' ]" routerLinkActive="active"> <span>News</span> </a> <a [routerLink]="[ '/product' ]" routerLinkActive="active"> <span>Product</span> </a> </div> <div> <div> <!-- 组件渲染的出口 --> <router-outlet></router-outlet> </div> </div> </div>当然，如果你非要自己给自己找事，就是要用 a 标签的 href 属性进行跳转，当然也是可以的，不过在后面涉及到相关框架的功能时就会显得有点不辣么聪明的样子了
4.1.3、重定向与通配地址在普遍情况下，对于进入系统后的默认路径，我们会选择重定向到一个具体的地址上，这里我们在定义路由信息时，定义了一个空路径用来表示系统的默认地址，当用户请求时，重定向到 /home 路径上，因为只有完整的 url 地址匹配空字符串时才应该进行重定向操作，所以这里需要指定匹配模式是全部匹配