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 }
    ): Promiseboolean>
    

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

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

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

1.2 navigate()

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

第一个参数是一个数组

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

更多用法更新于 gIThub：

https://github.COM/deepthan/blog-angular

更多编程相关知识，请访问：编程入门！！

以上就是浅析Angular路由中navigateByUrl和navigate的区别和共同点的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！