本篇文章给大家介绍一下angular router路由跳转中的navigatebyurl与navigate，看看navigate()和navigatebyurl()的使用方法。
开始进入实战前，我们先来看下官方文档中对navigateByUrl、navigate的介绍。【相关教程推荐：《angular教程》】
navigateByUrl() ：
定义：基于所提供的 URL 进行导航，必须使用绝对路径
参数：url（string | UrlReee ）、extras（一个包含一组属性的对象，它会修改导航策略）
返回值：返回一个Promise。当导航成功时，它会解析成true；导航失败或者出错时，它会解析成false
ps：对于navigateByUrl的用法和定义官方已经交代的很清楚了。但是，如果我们对其中的定义绝对路径和相对路径的概念有点记忆模糊了，那么，我，直接给出例子，就不麻烦小宝贝们再去找度娘了，谁让我贴心呐
E:mySoftGitin // 绝对路径。从盘符开始Gitin // 相对路径。从当前路径开始
登录后复制
navigate()：
定义：基于所提供的命令数组和起点路由进行导航。 如果没有指定起点路由，则从根路由开始进行绝对导航
参数：commands（any[] ）、extras
返回值：返回一个Promise。当导航成功时，它会解析成true；导航失败时，它会解析成false；导航出错时，它会拒绝（reject）
值得注意的点是，navigate的第一个参数必须是数组形式的即 any[]。
言归正传，回归到功能上，这两个方法都是在angular种进行路由跳转的。那么我们在实际项目中有以下常见的xxx种用法，我们 一 一 来看看吧~~
实战中，我们先来定义三个路由，分别是“路由a、路由b、路由c”。 这三个路由分别是同级路由并且都在根目录下。
navigateByUrl
路由a跳转到路由bthis.router.navigateByUrl('b'); // 正确。解析结果是 localhost:4200/bthis.router.navigateByUrl('./b'); // 错误。只能是绝对路径哦路由b跳转到路由cthis.router.navigateByUrl('cascader', {}); // 解析结果是 localhost:4200/c
登录后复制
navigateByUrl的用法比较简单，容易理解，用法也比较单一。我们主要来介绍以下navigate的用法哈~~
navigate
1、路由b跳转到路由c（以根路由为基础进行跳转）
this.router.navigate(['c']); // 绝对路径。 localhost:4200/cthis.router.navigate(['./c']); // 相对路径。 localhost:4200/c
登录后复制
2、路由b跳转到路由c（以当前路由为基础进行跳转）
this.router.navigate(['c'],{ relativeTo:this.route }); // localhost:4200/b/cthis.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的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2709508.html
