Angular路由中navigateByUrl和navigate有何不同及相同之处？

本文共计1163个文字，预计阅读时间需要5分钟。

本章节将对比Angular中的`navigateByUrl`和`navigate`方法，探讨它们在路由跳转中的不同与相同之处，希望对大家有所帮助！

Angular中的`navigateByUrl`和`navigate`方法都是用于页面跳转的，但它们在用法和功能上有所区别。

首先，我们来看它们的共同点：

1. 两者都可以实现路由跳转，即将页面导向到指定的URL。

2.两者都可以接收参数，如查询参数和片段参数。

接下来，我们分析它们的区别：

1. `navigateByUrl`方法接收一个字符串参数，该参数是目标URL的完整路径。而`navigate`方法接收一个对象参数，该对象包含了路由参数、查询参数和片段参数。

2. `navigateByUrl`方法只能进行一次性路由跳转，而`navigate`方法可以链式调用，实现更复杂的路由操作。

以下是一个简单的示例：

typescript

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

// 使用navigateByUrlrouter.navigateByUrl('/home');

// 使用navigaterouter.navigate(['/home'], { queryParams: { id: 123 }, fragment: 'section' });

总结：

- `navigateByUrl`方法简单易用，适合进行一次性路由跳转。- `navigate`方法功能更强大，可以链式调用，实现复杂的路由操作。

希望这个对比能帮助大家更好地理解Angular中的路由跳转方法！

本篇文章给大家对比一下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<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) // 发生无措 });

更多用法更新于 github：

github.com/deepthan/blog-angular

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