js教程 浅谈Angular路由跳转中的navigateByUrl和navigate

 所属分类:web前端开发

 浏览:229次-  评论: 0次-  更新时间:2022-06-08
描述:这是一篇js教程 浅谈Angular路由跳转中的navigateByUrl和navigate的说明内容,如果你想学习查找类似的文章,可以进入web前端开发获得最新...
这是一篇js教程 浅谈Angular路由跳转中的navigateByUrl和navigate的说明内容,如果你想学习查找类似的文章,可以进入web前端开发获得最新优质资料。 本篇文章给大家介绍一下Angular Router路由跳转中的navigateByUrl与navigate,看看navigate()和navigateByUrl()的使用方法。

开始进入实战前,我们先来看下官方文档中对navigateByUrl、navigate的介绍。【相关教程推荐:《angular教程》】

navigateByUrl() :

定义:基于所提供的 URL 进行导航,必须使用绝对路径
参数:url(string | UrlReee )、extras(一个包含一组属性的对象,它会修改导航策略)
返回值:返回一个Promise。当导航成功时,它会解析成true;导航失败或者出错时,它会解析成false

ps:对于navigateByUrl的用法和定义官方已经交代的很清楚了。但是,如果我们对其中的定义绝对路径和相对路径的概念有点记忆模糊了,那么,我,直接给出例子,就不麻烦小宝贝们再去找度娘了,谁让我贴心呐

E:\mySoft\Git\bin  // 绝对路径。从盘符开始
Git\bin  // 相对路径。从当前路径开始

navigate():

定义:基于所提供的命令数组和起点路由进行导航。 如果没有指定起点路由,则从根路由开始进行绝对导航
参数:commands(any[] )、extras
返回值:返回一个Promise。当导航成功时,它会解析成true;导航失败时,它会解析成false;导航出错时,它会拒绝(reject)

值得注意的点是,navigate的第一个参数必须是数组形式的即 any[]

言归正传,回归到功能上,这两个方法都是在angular种进行路由跳转的。那么我们在实际项目中有以下常见的xxx种用法,我们 一 一 来看看吧~~


实战中,我们先来定义三个路由,分别是“路由a、路由b、路由c”。
这三个路由分别是同级路由并且都在根目录下。


navigateByUrl

路由a跳转到路由b
this.router.navigateByUrl('b');  // 正确。解析结果是 localhost:4200/b
this.router.navigateByUrl('./b');  // 错误。只能是绝对路径哦

路由b跳转到路由c
this.router.navigateByUrl('cascader', {});  // 解析结果是 localhost:4200/c

navigateByUrl的用法比较简单,容易理解,用法也比较单一。我们主要来介绍以下navigate的用法哈~~

navigate

1、路由b跳转到路由c(以根路由为基础进行跳转)

this.router.navigate(['c']);  // 绝对路径。 localhost:4200/c
this.router.navigate(['./c']);  // 相对路径。 localhost:4200/c

2、路由b跳转到路由c(以当前路由为基础进行跳转)

this.router.navigate(['c'],{ relativeTo:this.route });  // localhost:4200/b/c
this.router.navigate(['c',1],{ relativeTo:this.route });  // localhost:4200/b/c/1

3、路由b跳转到路由b(以当前路由为基础进行跳转)

this.router.navigate([],{ relativeTo:this.route });  // localhost:4200/b

4、路由b跳转到路由c(路由中携带锚点进行跳转)

this.router.navigate(['c'],{ fragment:'zita' });  // localhost:4200/c#zita
	现在么,成功跳转到路由c了。我又想从路由c跳转到路由a(携带锚点跳转)
	this.router.navigate(['a'], { preserveFragment: true});  // localhost:4200/a#zita

5、路由b跳转到路由c(路由中传参数进行跳转)

this.router.navigate(['c'],{ queryParams:{name:'zita'} });  // localhost:4200/c?name=zita
	现在么,成功跳转到路由c了。我又想从路由c跳转到路由a,有以下五种情况:
	
	(1)不携带参数跳转
	this.router.navigate(['a'], { queryParamsHandling: null });  // localhost:4200/a
	(2)携带参数跳转
	this.router.navigate(['a'], { queryParamsHandling: 'merge'});  // localhost:4200/a?name=zita
	
	执行完以下三种情况的代码后,看到的页面是路由a的页面哦!
	(3)携带参数。浏览器中的URL不变,参数会失效即,在路由a中打印的参数结果是{}
	this.router.navigate(['a'], { skipLocationChange: true });  // localhost:4200/c?name=zita
	(4)携带参数。浏览器中的URL不变,参数有效。在路由a中打印的参数结果是{name: "zita"}
	this.router.navigate(['a'], {skipLocationChange: true, queryParamsHandling: 'merge'});  // localhost:4200/c?name=zita
	(5)携带参数。浏览器中的URL不变,参数有效,并且携带上其他参数。在路由a中打印的参数结果是{name: "zita",sex: "female"}
	this.router.navigate( ['a'], {skipLocationChange: true, queryParamsHandling: 'merge', queryParams: { sex: 'female' } });  // localhost:4200/c?name=zita

6、路由b跳转到路由c(导航时不会把当前状态记入历史)

 在路由c中,点击浏览器的返回按钮,会忽略路由b而直接跳转回到路由b的上一层路由
this.router.navigate(['c'],{ replaceUrl:true });  // localhost:4200/c

在这里插入图片描述

最后的最后,小可爱们~

在使用路由的时候千千万万不要忘记引入router哦~~

import { Router } from '@angular/router';
constructor( private router: Router) { }

另外,如果你想打印携带过来的参数,那么代码片段如下:

import { Router, ActivatedRoute, Params } from '@angular/router';
ngOnInit() {
    this.route.queryParams.subscribe((params: Params) => {
      console.log(params);
    });
}

happyEnding…

更多编程相关知识,请访问:编程入门!!

以上就是浅谈Angular路由跳转中的navigateByUrl和navigate的详细内容,更多请关注zzsucai.com其它相关文章!

 标签:
积分说明:注册即送10金币,每日签到可获得更多金币,成为VIP会员可免金币下载! 充值积分充值会员更多说明»

讨论这个素材(0)回答他人问题或分享使用心得奖励金币

〒_〒 居然一个评论都没有……

表情  文明上网,理性发言!