Angular路由中navigateByUrl和navigate的区别有哪些

这篇文章主要介绍"Angular路由中navigateByUrl和navigate的区别有哪些"，在日常操作中，相信很多人在Angular路由中navigateByUrl和navigate的区别有哪些问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答"Angular路由中navigateByUrl和navigate的区别有哪些"的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

angular navigateByUrl vs navigate 路由跳转

import { Router, ActivatedRoute } from '@angular/router';export class xxx{   constructor(private router: Router, private route: ActivatedRoute）{} }

1. 不同点

1.1 navigateByUrl()

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

第一个参数必须是==绝对路径==的字符串。

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

他俩接收的第一个参数不同，第二个参数相同。

1.2 navigate()

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

第一个参数是一个数组

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: `    Test  `,})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) // 发生无措  });

到此，关于"Angular路由中navigateByUrl和navigate的区别有哪些"的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注网站，小编会继续努力为大家带来更多实用的文章！