路由是什么
Angular的路由器能让用户从一个视图导航到另一个视图
实现什么样的功能
- 在地址栏输入URL，浏览器就会导航到相应的页面。
- 在页面中点击链接，浏览器就会导航到一个新页面。
- 点击浏览器的前进和后退按钮，浏览器就会在你的浏览历史中向前或向后导航。
路由组成
<base href> 元素
大多数带路由的应用都要在index.html的<head>标签下先添加一个<base>元素，来告诉路由器该如何合成导航用的URL。
<base href="/">
导入路由模块
`import { RouterModule, Routes } from '@angular/router';
Angular的路由器是一个可选的服务，它用来呈现指定的URL所对应的视图。 它并不是Angular核心库的一部分，而是在它自己的@angular/router包中。 像其它Angular包一样，我们可以从它导入所需的一切。
配置路由
下面的例子创建了四个路由定义，并用RouterModule.forRoot
方法来配置路由器， 并把它的返回值添加到AppModule
的imports
数组中。
const appRoutes: Routes = [
{ path: 'crisis-center', component: CrisisListComponent },
{ path: 'hero/:id', component: HeroDetailComponent },
{
path: 'heroes',
component: HeroListComponent,
data: { title: 'Heroes List' }
},
{ path: '',
redirectTo: '/heroes',
pathMatch: 'full'
},
{ path: '**', component: PageNotFoundComponent }
];
@NgModule({
imports: [
RouterModule.forRoot(
appRoutes,
{ enableTracing: true } // <-- debugging purposes only
)
// other imports here
],
...
})
export class AppModule { }
这里的路由数组appRoutes
描述如何进行导航。 把它传给RouterModule.forRoot
方法并传给本模块的imports
数组就可以配置路由器。
每个Route
都会把一个URL的path
映射到一个组件。 注意，path
不能以斜杠（/
）开头。 路由器会为解析和构建最终的URL，这样当我们在应用的多个视图之间导航时，可以任意使用相对路径和绝对路径。
第二个路由中的:id
是一个路由参数的令牌(Token)。比如/hero/42
这个URL中，“42”就是id
参数的值。 此URL对应的HeroDetailComponent
组件将据此查找和展现id
为42的英雄。 在本章中稍后的部分，我们将会学习关于路由参数的更多知识。
第三个路由中的data
属性用来存放于每个具体路由有关的任意信息。该数据可以被任何一个激活路由访问，并能用来保存诸如 页标题、面包屑以及其它静态只读数据。本章稍后的部分，我们将使用resolve守卫来获取动态数据。
第四个路由中的空路径（''
）表示应用的默认路径，当URL为空时就会访问那里，因此它通常会作为起点。 这个默认路由会重定向到URL /heroes
，并显示HeroesListComponent
。
最后一个路由中的**
路径是一个通配符。当所请求的URL不匹配前面定义的路由表中的任何路径时，路由器就会选择此路由。 这个特性可用于显示“404 - Not Found”页，或自动重定向到其它路由。
这些路由的定义顺序是刻意如此设计的。路由器使用先匹配者优先的策略来匹配路由，所以，具体路由应该放在通用路由的前面。在上面的配置中，带静态路径的路由被放在了前面，后面是空路径路由，因此它会作为默认路由。而通配符路由被放在最后面，这是因为它能匹配上每一个URL，因此应该只有在前面找不到其它能匹配的路由时才匹配它。
如果我们想要看到在导航的生命周期中发生过哪些事件，可以使用路由器默认配置中的enableTracing选项。它会把每个导航生命周期中的事件输出到浏览器的控制台。 这应该只用于调试。我们只需要把enableTracing: true
选项作为第二个参数传给RouterModule.forRoot()
方法就可以了。
link路由出口
有了这份配置，当本应用在浏览器中的URL变为/heroes
时，路由器就会匹配到path
为heroes
的Route
，并在宿主视图中的*RouterOutlet
*之后显示HeroListComponent
组件。
<router-outlet></router-outlet>
<!-- Routed views go here -->
