为什么要用路由？
路由允许我们在URL中表达应用程序某种状态。与服务器端前端解决方案不同，这是可选的 - 我们可以在不更改URL的情况下构建完整的应用程序。 然而，添加路由允许用户直接进入应用程序的某部分。 这非常方便，因为它可以保持您的应用程序可链接并且可以被添加为书签，还允许用户与他人分享链接。
路由可以让你：
- 保持应用程序的状态
- 实现模块化应用
- 基于角色实现应用程序（某些角色可以访问某些URL）
配置路由
Base 标签
Base 标记必须在index.html的标记中设置：
<base href="/">
在演示中，我们使用脚本标记来设置
base标记。在实际应用中，必须如上设置。
路由定义对象
Routes类型是定义应用程序路由的路由数组。 这是我们可以设置预期的路径，我们想要使用的组件，我们希望我们的应用程序来理解它们。
每个路由可以有不同的属性; 一些常见的属性是：
- path - 应用程序在特定路由上时在浏览器中显示的URL
- component - 当应用程序在特定路由上时要呈现的组件
- redirectTo - 如果需要重定向路由; 每个路由可以具有在路由中定义的组件或重定向属性（在本章后面讨论）
- pathMatch - 默认为’prefix’的可选属性。 确定是匹配完整的网址还是仅匹配开头。 当定义一个具有空路径字符串的路径设置pathMatch为’full’时，否则它将匹配所有路径。
- children - 表示此路由的子路由的路由定义数组（本章后面将介绍）。
要使用路由，请创建 路由配置数组。
下面是Routes数组定义的示例：
const routes: Routes = [
{ path: 'component-one', component: ComponentOne },
{ path: 'component-two', component: ComponentTwo }
];
RouterModule
RouterModule.forRoot将Routes数组作为参数，并返回配置的路由器模块。 此路由器模块必须在应用程序模块的导入列表中指定。
...
import { RouterModule, Routes } from '@angular/router';
const routes: Routes = [
{ path: 'component-one', component: ComponentOne },
{ path: 'component-two', component: ComponentTwo }
];
export const routing = RouterModule.forRoot(routes);
@NgModule({
imports: [
BrowserModule,
routing
],
declarations: [
AppComponent,
ComponentOne,
ComponentTwo
],
bootstrap: [ AppComponent ]
})
export class AppModule {
}
platformBrowserDynamic().bootstrapModule(AppModule);