前言

在Angular的学习使用过程中，路由跳转支撑了项目的全过程，所以路由跳转是一个很常见也是一个很容易忽略的点，所以现在咱们一起来了解一下吧。

叙述

Web应用中的页面跳转，指的是应用响应某个事件，从一个页面跳转到另外一个页面的行为。对于使用Angular构建的单页应用而言，页面跳转实质上就是从一个配置项跳转到另一个配置型的行为。当某个事件引发了跳转时，Angular会根据跳转时的参数生成一个UrlTree实例来和配置型进行匹配，如果匹配成功则显示相应的组件并将新URL更新在浏览器地址栏上。如果匹配不成功则报错。

Angular应用中进行页面跳转一共有两种方式，使用指令跳转和使用代码跳转。

使用指令跳转

指令跳转通过使用RouterLink指令来完成。该指令接收一个链接参数数组，Angular将根据该数组来生成UrlTree实例进行跳转。

<nav>
     <a [routerLink]="['/collection']">
          <i>收藏</i>
     </a>
     <a [routerLink]="['/collection']">
          <i>收藏</i>
     </a>
<nav>

/* footer.component.css */
.active{
    background-color:#3DD689;
}
 <!-- footer.component.html-->
<nav>
     <a [routerLink]="['/collection']">
          <i>收藏</i>
     </a>
     <a [routerLink]="['/collection']" routerLinkActive="active">
          <i>收藏</i>
     </a>
<nav>

使用代码跳转

如果需要响应其他事件或者需要根据运行时的数据动态决定如何跳转，则可以通过条用Router.navigateByUrl()来完成。

在Html中写代码如下：

<div class="form-group">
    <button type="submit" class="btn btn-success" (click)="workSpace()">登录</button>
</div>

//login.component.ts
import {Router} from '@angular/router';
export class LoginComponent implements OnInit {

  constructor(
    public router: Router,) { }

  ngOnInit() {
  }
  /*需要引入import { Router } from '@angular/router'; */
  public workSpace():void{
    this.router.navigateByUrl("workspace");
}}

小结

以上两种路由跳转的方法都很实用，具体分别在什么情况下使用，小编在接下来会继续研究的。欢迎各位大神们的指导哦。