浅谈Angular路由跳转中的navigateByUrl和navigate-木庄网络博客

本文摘自PHP中文网，作者青灯夜游，侵删。

本篇文章给大家介绍一下Angular Router路由跳转中的navigateByUrl与navigate，看看navigate()和navigateByUrl()的使用方法。

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

navigateByUrl() ：

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

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

1 2	`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（以根路由为基础进行跳转）

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

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

1 2	`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（以当前路由为基础进行跳转）

1	`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