這篇文章跟大家介紹一下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」。
這三個路由分別是同級路由並且都在根目錄下。
路由a跳转到路由b this.router.navigateByUrl('b'); // 正确。解析结果是 localhost:4200/b this.router.navigateByUrl('./b'); // 错误。只能是绝对路径哦 路由b跳转到路由c this.router.navigateByUrl('cascader', {}); // 解析结果是 localhost:4200/c
navigateByUrl的用法比較簡單,容易理解,用法也比較單一。我們主要來介紹以下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中文網其他相關文章!