本篇文章給大家介紹一下Angular Router路由跳轉(zhuǎn)中的navigateByUrl與navigate，看看navigate()和navigateByUrl()的使用方法。

開始進入實戰(zhàn)前，我們先來看下官方文檔中對navigateByUrl、navigate的介紹?！鞠嚓P(guān)教程推薦：《angular教程》】

navigateByUrl() ：

定義：基于所提供的 URL 進行導(dǎo)航，必須使用絕對路徑
參數(shù)：url（string | UrlReee ）、extras（一個包含一組屬性的對象，它會修改導(dǎo)航策略）
返回值：返回一個Promise。當(dāng)導(dǎo)航成功時，它會解析成true；導(dǎo)航失敗或者出錯時，它會解析成false

ps：對于navigateByUrl的用法和定義官方已經(jīng)交代的很清楚了。但是，如果我們對其中的定義絕對路徑和相對路徑的概念有點記憶模糊了，那么，我，直接給出例子，就不麻煩小寶貝們再去找度娘了，誰讓我貼心吶

E:mySoftGitbin  // 絕對路徑。從盤符開始 Gitbin  // 相對路徑。從當(dāng)前路徑開始

navigate()：

定義：基于所提供的命令數(shù)組和起點路由進行導(dǎo)航。 如果沒有指定起點路由，則從根路由開始進行絕對導(dǎo)航
參數(shù)：commands（any[] ）、extras
返回值：返回一個Promise。當(dāng)導(dǎo)航成功時，它會解析成true；導(dǎo)航失敗時，它會解析成false；導(dǎo)航出錯時，它會拒絕（reject）

值得注意的點是，navigate的第一個參數(shù)必須是數(shù)組形式的即 any[]。

言歸正傳，回歸到功能上，這兩個方法都是在angular種進行路由跳轉(zhuǎn)的。那么我們在實際項目中有以下常見的xxx種用法，我們 一 一 來看看吧~~

實戰(zhàn)中，我們先來定義三個路由，分別是“路由a、路由b、路由c”。
這三個路由分別是同級路由并且都在根目錄下。

navigateByUrl

路由a跳轉(zhuǎn)到路由b this.router.navigateByUrl('b');  // 正確。解析結(jié)果是 localhost:4200/b this.router.navigateByUrl('./b');  // 錯誤。只能是絕對路徑哦  路由b跳轉(zhuǎn)到路由c this.router.navigateByUrl('cascader', {});  // 解析結(jié)果是 localhost:4200/c

navigateByUrl的用法比較簡單，容易理解，用法也比較單一。我們主要來介紹以下navigate的用法哈~~

navigate

1、路由b跳轉(zhuǎn)到路由c（以根路由為基礎(chǔ)進行跳轉(zhuǎn)）

this.router.navigate(['c']);  // 絕對路徑。 localhost:4200/c this.router.navigate(['./c']);  // 相對路徑。 localhost:4200/c

2、路由b跳轉(zhuǎn)到路由c（以當(dāng)前路由為基礎(chǔ)進行跳轉(zhuǎn)）

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跳轉(zhuǎn)到路由b（以當(dāng)前路由為基礎(chǔ)進行跳轉(zhuǎn)）

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

4、路由b跳轉(zhuǎn)到路由c（路由中攜帶錨點進行跳轉(zhuǎn)）

this.router.navigate(['c'],{ fragment:'zita' });  // localhost:4200/c#zita 	現(xiàn)在么，成功跳轉(zhuǎn)到路由c了。我又想從路由c跳轉(zhuǎn)到路由a（攜帶錨點跳轉(zhuǎn)） 	this.router.navigate(['a'], { preserveFragment: true});  // localhost:4200/a#zita

5、路由b跳轉(zhuǎn)到路由c（路由中傳參數(shù)進行跳轉(zhuǎn)）

this.router.navigate(['c'],{ queryParams:{name:'zita'} });  // localhost:4200/c?name=zita 	現(xiàn)在么，成功跳轉(zhuǎn)到路由c了。我又想從路由c跳轉(zhuǎn)到路由a,有以下五種情況： 	 	（1）不攜帶參數(shù)跳轉(zhuǎn) 	this.router.navigate(['a'], { queryParamsHandling: null });  // localhost:4200/a 	（2）攜帶參數(shù)跳轉(zhuǎn) 	this.router.navigate(['a'], { queryParamsHandling: 'merge'});  // localhost:4200/a?name=zita 	 	執(zhí)行完以下三種情況的代碼后，看到的頁面是路由a的頁面哦！ 	（3）攜帶參數(shù)。瀏覽器中的URL不變，參數(shù)會失效即,在路由a中打印的參數(shù)結(jié)果是{} 	this.router.navigate(['a'], { skipLocationChange: true });  // localhost:4200/c?name=zita 	（4）攜帶參數(shù)。瀏覽器中的URL不變，參數(shù)有效。在路由a中打印的參數(shù)結(jié)果是{name: "zita"} 	this.router.navigate(['a'], {skipLocationChange: true, queryParamsHandling: 'merge'});  // localhost:4200/c?name=zita 	（5）攜帶參數(shù)。瀏覽器中的URL不變，參數(shù)有效，并且攜帶上其他參數(shù)。在路由a中打印的參數(shù)結(jié)果是{name: "zita",sex: "female"} 	this.router.navigate( ['a'], {skipLocationChange: true, queryParamsHandling: 'merge', queryParams: { sex: 'female' } });  // localhost:4200/c?name=zita

6、路由b跳轉(zhuǎn)到路由c（導(dǎo)航時不會把當(dāng)前狀態(tài)記入歷史）

 在路由c中，點擊瀏覽器的返回按鈕，會忽略路由b而直接跳轉(zhuǎn)回到路由b的上一層路由 this.router.navigate(['c'],{ replaceUrl:true });  // localhost:4200/c

最后的最后，小可愛們~

在使用路由的時候千千萬萬不要忘記引入router哦~~

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

另外，如果你想打印攜帶過來的參數(shù)，那么代碼片段如下：

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

happyEnding…