广告：宝塔服务器面板，一键全能部署及管理，送你10850元礼包，点我领取~~~

本篇文章给大家对比一下Angular路由中navigateByUrl和navigate，看看他们的不同点和共同点，希望对大家有所帮助！

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

【相关教程推荐：《angular教程》】

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

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

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

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

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)进行导航。

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

以 navigate 举例

此种传参方式会把参数拼接在url上，如localhost:4200/demo?id=1

A组件传递参数

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

B组件接收参数

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

import { ActivatedRoute } from '@angular/router';constructor(private activatedRoute: ActivatedRoute) {    this.activatedRoute.queryParams.subscribe((param) => {      console.log('组件里面的queryParams', param); // {id :1}    });}

此种方式会把数据存在浏览器的历史记录中，state必须是一个对象，在子路由中使用getCurrentNavigation取出。

A组件传递参数

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

B组件接收参数

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

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

更多用法更新于 github：

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

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

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