Angular2 之 路由与导航详细介绍

导航是很简单的，只是不同页面之间的切换，路由是实现导航的一种。

一个url对应的一个页面，在angular2中是一个组件。定义一个规则。

基础知识

大多数带路由的应用都要在index.html的标签下先添加一个元素，来告诉路由器该如何合成导航用的URL。

路由是从@angular/router包中引入的。

路由都是需要进行配置的。而这个配置需要的也就是RouterModule模块。

一个路由配置

path中不能用斜线/开头。

这些路由的定义顺序是故意如此设计的。 路由器使用先匹配者优先的策略来匹配路由，所以，具体路由应该放在通用路由的前面。在上面的配置中，带静态路径的路由被放在了前面，后面是空路径路由，因此它会作为默认路由。而通配符路由被放在最后面，这是因为它是最通用的路由，应该只在前面找不到其它能匹配的路由时才匹配它。

const appRoutes: Routes = [ { path:'',// empty path匹配各级路由的默认路径。 它还支持在不扩展URL路径的前提下添加路由。 component: DashboardComponent },{ path: 'dashboard', component: DashboardComponent }, { path: 'loopback', component: LoopbackComponent }, { path: 'heroparent', component: HeroParentComponent }, { path:'version', component: VersionParentComponent }, { path: '**',// **代表该路由是一个通配符路径。如果当前URL无法匹配上我们配置过的任何一个路由中的路径，路由器就会匹配上这一个。当需要显示404页面或者重定向到其它路由时，该特性非常有用。 component: DashboardComponent, }];export const appRoutingModule: ModuleWithProviders = RouterModule.forRoot(appRoutes);

RouterOutlet - 路由插座

显示路由器生成的视图。在展示父路由的位置中的某个地方展示子路由对应的地方。

路由模块

最开始的路由，我们是直接写在app.module.ts文件中的，像这样，我们可以实现简单的导航。

import { NgModule }    from '@angular/core';import { BrowserModule }  from '@angular/platform-browser';import { FormsModule }   from '@angular/forms';import { RouterModule, Routes } from '@angular/router';import { AppComponent }   from './app.component';import { CrisisListComponent } from './crisis-list.component';import { HeroListComponent } from './hero-list.component';const appRoutes: Routes = [ { path: 'crisis-center', component: CrisisListComponent }, { path: 'heroes', component: HeroListComponent }];@NgModule({ imports: [ BrowserModule, FormsModule, RouterModule.forRoot(appRoutes) ], declarations: [ AppComponent, HeroListComponent, CrisisListComponent ], bootstrap: [ AppComponent ]})export class AppModule {}

但是这样不方便，所以我们要进行路由的分离，重构成我们自己的路由模块。like this: