Angular路由中navigateByUrl和navigate的區(qū)別有哪些

這篇文章主要介紹“Angular路由中navigateByUrl和navigate的區(qū)別有哪些”，在日常操作中，相信很多人在Angular路由中navigateByUrl和navigate的區(qū)別有哪些問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”Angular路由中navigateByUrl和navigate的區(qū)別有哪些”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

angular navigateByUrl vs navigate 路由跳轉(zhuǎn)

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

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

1. 不同點(diǎn)

1.1 navigateByUrl()

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

第一個(gè)參數(shù)必須是==絕對(duì)路徑==的字符串。

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

他倆接收的第一個(gè)參數(shù)不同，第二個(gè)參數(shù)相同。

1.2 navigate()

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

第一個(gè)參數(shù)是一個(gè)數(shù)組

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

那么解析的路由就是localhost:4200/home/demo。

可以相對(duì)當(dāng)前路由進(jìn)行導(dǎo)航

傳入一個(gè)relativeTo參數(shù)，即可相對(duì)傳入的路由進(jìn)行跳轉(zhuǎn)。如當(dāng)前在localhost:4200/home,

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

跳轉(zhuǎn)后的地址為localhost:4200/home/demo。

但如果'demo'寫(xiě)成'/demo'傳入的路由就不起作用了，會(huì)以根路由進(jìn)行導(dǎo)航。如果不傳入也是默認(rèn)以根路由(localhost:4200)進(jìn)行導(dǎo)航。

2. 共同點(diǎn)：

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

2.1 傳遞參數(shù)方式一樣

以 navigate 舉例

通過(guò)queryParams傳參

此種傳參方式會(huì)把參數(shù)拼接在url上，如localhost:4200/demo?id=1

A組件傳遞參數(shù)

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

B組件接收參數(shù)

• 若是通過(guò)/user/:id方式傳遞過(guò)來(lái)用 activatedRoute.params

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

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

• 若是通過(guò)/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}
    });
}

通過(guò)state傳參

此種方式會(huì)把數(shù)據(jù)存在瀏覽器的歷史記錄中，state必須是一個(gè)對(duì)象，在子路由中使用getCurrentNavigation取出。

A組件傳遞參數(shù)

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組件接收參數(shù)

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 就是傳過(guò)來(lái)的數(shù)據(jù)
  }
}

2.2 均有回調(diào)

 this.router.navigate(['demo']).then(nav => {
    console.log(nav); // true: 跳轉(zhuǎn)成功， false 跳轉(zhuǎn)失敗
  }, err => {
    console.log(err) // 發(fā)生無(wú)措
  });

到此，關(guān)于“Angular路由中navigateByUrl和navigate的區(qū)別有哪些”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！