Angular：routerLink实现导航的几种方式，以及各自的优缺点

Angular2的路由模块来自@angular/router，这不包含在angular2的核心模块中。所以如果我们想要学习angular2的路由功能，必须导入该模块。

总结几种导航的方式：

<a routerLink='/dashboard/home' routerLinkActive='active'>Home1</a>
<a routerLink='/dashboard/home' [routerLinkActive]="['active']">Home2</a>
<a routerLink='../home' routerLinkActive="active">Home 2.2 </a>
<a [routerLink]="['/dashboard/home']" [routerLinkActive]="['active']">Home3</a>
<a [routerLink]="['../home']" [routerLinkActive]="['active']">Home4</a>
<a [routerLink]="['../home']" [routerLinkActive]="['active']">Home5</a>
<a [routerLinkActive]="['active']" (click)="onSelect()">Home6</a>

其中最后一种导航的方式绑定的onSelect()方法：

onSelect() {
    this.router.navigate(['../home'],{relativeTo:this.route});
 }

现在我们来逐个分析一下这些可以导航的方式：

1. <a routerLink='/dashboard/home' routerLinkActive='active'>Home1</a>
   所有以斜线开头的都必须使用绝对路径来进行导航。也就是说我们会导航到www.app.com/dashboard/home 这个路径，这个路径是绝对的。一般我们不会使用这种方式。如果不使用绝对路径，一定谨记不要以斜线开头。
2. <a routerLink='/dashboard/home' [routerLinkActive]="['active']">Home2</a>
   可能咋一看这个和第一条是一样的，但是请我们看routerLinkActive，第一条是单独的一个属性，而第二条作为一个属性指令来使用。还有一个重点，如果我们使用属性指令，在给属性指令赋值的时候，必须在中括号内在加入一个单引号。这是为什么？因为如果我们不加这个单引号或双引号，那么angular会认为这是一个变量，会当做变量来使用。
3. <a routerLink='../home' routerLinkActive="active">Home 2.2 </a>
   可以看到这个routerLink使用的是相对路径，可以参考第七条，相对路径，是相对的哪个路径，其实就是当前路由。以当前路由作为起点进行相对导航。举个简单的例子，我们当前的路径为/dashboard/chart,现在我们要导航到home(背景：chart和home都是dashboard下的一个组件，属于平级)，那么我们就要使用两个点号..来表示。一个点号表示相对当前路径，两个点号就是相对父路径。
4. <a [routerLink]="['/dashboard/home']" [routerLinkActive]="['active']">Home3</a>
   通过指令方式来进行导航，可以参考第一条。绝对路径导航
5. <a [routerLink]="['../home']" [routerLinkActive]="['active']">Home4</a>
   通过指令方式进行导航，可以参考第一条和第三条，采用的routerLink指令和相对路径方式。
6. <a [routerLink]="['./home']" [routerLinkActive]="['active']">Home5</a>
   和第五条相同
7. <a [routerLinkActive]="['active']" (click)="onSelect()">Home6</a>    通过angular脚本方式进行导航。

 this.router.navigate(['../home'],{relativeTo:this.route});       // 如果要使用相对导航，必须加上relativeTo属性，并且赋值为route，route是ActivatedRoute的值

// 如果采用绝对路径，那么不需要添加这个属性。如果以斜线开头，并且定义了这个relativeTo属性会出现什么的？其实还是绝对路径优先，relativeTo没有起作用

 

通过我们的简单分析，我们来看一下，我们一般会采用哪种方式进行导航？

一般我们不会直接定义绝对路径的方式进行导航，这有很多原因：

1.绝对路径很长的时候很容易写错；

2.不容易移植。

 

那么采用相对路径，其实也存在很多问题：

1.由于angular2的组件可复用，并且可嵌套，我们如果要导航到一个组件，由于我们的父子关系，可能会出现导航相对路径不一致的情况；

2.由于angular2的路由存在嵌套关系，并且可以重复嵌套相同组件到不同层级，这就导致我们的组件复用度远没有我们想象的那么广泛。