angular 路由跳转以及传参,
本文向您介绍了Angular路由器的路由跳转中的navigate和navigate，并查看了navigate()和navigate()的用法。
在开始实战之前，我们先来看看官方文档中对navigateByUrl和导航的介绍。【相关教程推荐：《angular教程》】
navigateByUrl() ：
定义：基于提供的URL导航，必须使用绝对路径
参数：url(string UrlReee)，extras(一个具有一组将修改导航策略的属性的对象)
返回值：返回一个承诺。当导航成功时，它将解析为true；当导航失败或出现错误时，将被解释为错误。
Ps:官方对navigateByUrl的用法和定义解释的非常清楚。但是，如果我们对绝对路径和相对路径的概念有模糊的记忆，那么我，直接举个例子，就不会再麻烦宝宝们去找度娘了。谁让我甜蜜？
E:\mySoft\Git\bin //绝对路径。从驱动器号开始。
Git\bin //相对路径。navigate()：从当前路径
定义：基于提供的命令数组和起点路线的导航。如果没有指定起始路径，将从根路径开始绝对导航。
参数：命令(any[])，附加命令
返回值：返回一个承诺。当导航成功时，它将解析为true；导航失败时，将解析为false；当导航出错时，它会拒绝。
值得注意的是，navigate的第一个参数必须是数组形式的即 any[]。
言归正传，回归功能。这两种方法都以角度执行路由跳跃。那么我们在实际项目中常见的xxx用法有以下几种。让我们一个一个来看看吧~ ~
navigateByUrl
路由A跳至路由b。
this . router . navigatebyurl( b )；//正确。解析结果为localhost: 4200/B
this.router.navigateByUrl(。/b’)；//错误。它只能是绝对路径
路由b跳转到路由c。
this . router . navigatebyurl( cascader ，{ })；//分析结果是localhost:4200/cnavigateByUrl的用法简单易懂，简单明了。下面主要介绍一下navigate的用法~ ~
:
navigate
1.路由B跳至路由C(基于根路由)
this . router . navigate([ c ])；//绝对路径。本地主机：4200/c
this.router.navigate([。/c ])；//相对路径。Localhost:4200/c2，路由B跳转到路由C(基于当前路由)
this.router.navigate([c]，{ relative to:this . route })；//本地主机：4200/b/c
this.router.navigate([c ，1]，{ relative to:this . route })；//本地主机：4200/b/c/13。路由B跳转到路由B(基于当前路由)
this.router.navigate([]，{ relative to:this . route })；//localhost:4200/b4，路由B跳转到路由C(路由携带锚点跳转)
this.router.navigate([c]，{ fragment: zita })；//localhost:4200/c#zita
现在，我们已经成功跳到了C路，我也想从C路跳到A路(带锚点跳)
this.router.navigate([a]，{ preserve fragment:true })；//localhost:4200/a#zita5，路由B跳转到路由C(参数传入要跳转的路由)
this.router.navigate([c]，{ query params:{ name: zita } })；//localhost:4200/c？name=zita
现在，我们已经成功跳到了C路，我想再从C路跳到A路。有以下五种情况：
(1)不进行参数跳转。
this.router.navigate([a]，{ queryParamsHandling:null })；//本地主机：4200/a
(2)带参数跳转
this.router.navigate([a]，{ queryParamsHandling: merge })；//localhost:4200/a？name=zita
在执行了以下三种情况的代码后，你看到的页面就是路由A的页面！
(3)携带参数。如果浏览器中的URL不变，该参数将失效，即route 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中打印的参数结果为{姓名： zita ，性别：女性 }
this.router.navigate( [a]，{skipLocationChange: true，queryParamsHandling: merge ，query params:{ sex: female } })；//localhost:4200/c？Name=zita6，B路线跳转到C路线(导航时当前状态不会记录在历史中)
在路由C中，点击浏览器的后退按钮会忽略路由B，直接跳回路由B的上一条路由。
this.router.navigate([c]，{ replace URL:true })；//本地主机：4200/c
终于，小可爱们~
在使用路由的时候，千千千万不要忘记介绍路由器~ ~
从“@angular/router”导入{ Router }；
constructor(private Router:Router){ }另外，如果要打印自己带的参数，那么代码片段如下：
从“@angular/router”导入{ Router，ActivatedRoute，Params }；
ngOnInit() {
this . route . query Params . subscribe((Params:Params)={
console . log(params)；
});
}快乐丁…
有关编程的更多信息，请访问：编程入门！以上就是关于navigateByUrl和Angular route jump中导航的细节。请多关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。