淺談Angular路由跳轉中的navigateByUrl和navigate

這篇文章跟大家介紹一下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的詳細內容。更多資訊請關注PHP中文網其他相關文章！