WWW.lllT.neT这篇文章内容给大伙儿比照一下Angular路由器中navigateByUrl和navigate，看一下这些人的不同之处和相同点，期待对各位有些协助！

angular navigateByUrl vs navigate 路由跳转

import { Router, ActivatedRoute } from '@angular/router';

export class xxx{
   constructor(private router: Router, private route: ActivatedRoute）{} 
}

【有关实例教程建议：《angular教程》】

1. 不同之处

1.1 navigateByUrl()

navigateByUrl(url: string | UrlTree, extras: NavigationExtras = { skipLocationChange: false }): Promise<boolean>

第一个主要参数务必是==相对路径==的字符串数组。

 this.router.navigateByUrl('/home');

他们接受的第一个主要参数不一样，第二个主要参数同样。

1.2 navigate()

navigate(commands: any[], extras: NavigationExtras = { skipLocationChange: false }): Promise<boolean>

第一个主要参数是一个二维数组

this.router.navigate(['home', 'demo'])

那样分析的路由器便是localhost:4200/home/demo。

可以相对性当今路由器开展导航栏

传到一个relativeTo主要参数，就可以相对性传到的路由器开展自动跳转。如当今在localhost:4200/home,

this.router.navigate(['demo'], {relativeTo: this.route})

自动跳转后的详细地址为localhost:4200/home/demo。

但假如'demo'写出'/demo'传到的路由器就失灵了，会以根路由器开展导航栏。如果不传到也是默认设置以根路由器(localhost:4200)开展导航栏。

2. 相同点：

interface NavigationExtras {
  relativeTo?: ActivatedRoute | null
  queryParams?: Params | null
  fragment?: string
  preserveQueryParams?: boolean
  queryParamsHandling?: QueryParamsHandling | null
  preserveFragment?: boolean
  skipLocationChange?: boolean
  replaceUrl?: boolean
  state?: {...}
}

2.1 传送主要参数方法一样

以 navigate 例举

根据queryParams传参

此类传参方法会把主要参数拼凑在url上，如localhost:4200/demo?id=1

A部件传送主要参数

this.router.navigate(['demo'], {queryParams: {id: 1} , relativeTo: this.route})

B部件接受主要参数

若是根据/user/:id方法传送回来用 activatedRoute.params

import { ActivatedRoute } from '@angular/router';

constructor(private activatedRoute: ActivatedRoute) {
    this.activatedRoute.params.subscribe((param) => {
      console.log('部件里边的param', param);// {id :1}
    });
}

若是根据/user?id=1方法传送用activatedRoute.queryParams

import { ActivatedRoute } from '@angular/router';

constructor(private activatedRoute: ActivatedRoute) {
    this.activatedRoute.queryParams.subscribe((param) => {
      console.log('部件里边的queryParams', param); // {id :1}
    });
}

根据state传参

此类方法会把数据信息存有电脑浏览器的历史数据中，state务必是一个目标，在子路由器中应用getCurrentNavigation取下。

A部件传送主要参数

import { Component, Input } from '@angular/core';
import { Router, NavigationExtras } from '@angular/router';

@Component({
  selector: 'a-component',
  template: `
    <button (click)="test()">Test</button>
  `,
})
export class AComponent  {
  constructor(private router: Router){}

  test(){
    const navigationExtras: NavigationExtras = {state: {id: 1}};
    this.router.navigate(['b'], navigationExtras);
  }
}

B部件接受主要参数

import { Component } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'b-component'
})
export class BComponent {
  constructor(private router: Router) { 
    const navigation = this.router.getCurrentNavigation();
    const state = navigation.extras.state as {id: number};
    // state.id 便是传出去的数据信息
  }
}

2.2 均有调整

 this.router.navigate(['demo']).then(nav => {
    console.log(nav); // true: 自动跳转取得成功， false 自动跳转不成功
  }, err => {
    console.log(err) // 产生不知所终
  });