angular2路由是管理angular2应用内部导航的一个重要内容，在angular应用中，很多的组件是通过组合完成一个复杂的应用，不可避免的是我们常会在视图间切换，那么这是就需要使用路由来管理视图间的转换。
路由定义
先看一个简单的路由定义
///<reference path="../node_modules/angular2/typings/browser.d.ts"/>
import {Component} from ‘angular2/core‘;
import {RouteConfig, ROUTER_DIRECTIVES} from ‘angular2/router‘;
import {parentCmp} from "./parent.component";
import {planetList} from "./planet-list.component";
@Component({
selector: ‘my-app‘,
template: `
<h3 class="title">Angular 2 Router Example</h3>
<nav>
<a [routerLink]="[‘Parent‘]">parent</a>
<a [routerLink]="[‘PlanetList‘]">planetList</a>
</nav>
<router-outlet></router-outlet>
`,
directives: [ROUTER_DIRECTIVES]
})
@RouteConfig([
{
path: ‘/contact‘,
name: ‘Parent‘,
component: parentCmp,
useAsDefault: true
},
{
path: ‘/planetList‘,
name: ‘PlanetList‘,
component: planetList
}
])
export class RouteExampleAppComponent { }
从这个例子可以看出路由定义的过程
1、 引入路由组件import {RouteConfig, ROUTER_DIRECTIVES} from ‘angular2/router‘
2、 引入我们所需的导航组件
import {parentCmp} from "./parent.component";
import {planetList} from "./planet-list.component";
3、 定义组件，配置模板，定义路由
<a [routerLink]="[‘Parent‘]">parent</a>定义了一个路由，其中的Parent是我们的一个的一个路由标签，来自下面的路由配置，注意使用驼峰的表达方式。
<router-outlet></router-outlet>定义了视图的显示位置，即导航的模块显示区域
directives: [ROUTER_DIRECTIVES]，引入路由指令
@RouteConfig：用于进行路由配置，其中path只路由的路径，在url中能够看到；name指路由的名称，和上面导航一致；component路由的组件即路由指向的组件。
这样一个简单的路由组件就基本完成
路由使用
import {bootstrap} from ‘angular2/platform/browser‘;
import {ROUTER_PROVIDERS} from ‘angular2/router‘;
import {RouteExampleAppComponent} from "./myRoute";
bootstrap(RouteExampleAppComponent, [ROUTER_PROVIDERS]);
这里和前面的bootstrap组件调用不同的是除了引入自定义的组件外还需要注入angular的路由服务。