NavigationByUrl에 대한 간략한 토론 및 Angular 라우팅 점프 탐색

이 글에서는 Angular NavigationByUrl을 소개하고 라우터 라우팅 점프를 탐색하고 Navigate() 및 NavigateByUrl()을 사용하는 방법을 알아봅니다.

실제 전투를 시작하기 전에 먼저 NaviUrl 소개를 살펴보고 공식 문서를 살펴보겠습니다. [관련 튜토리얼 권장사항: "angular tutorial"]

navigateByUrl():

정의: 제공된 URL을 기반으로 탐색, 절대 경로를 사용해야 함
매개변수: url (문자열 | UrlReee), extras ( An 탐색 전략을 수정하는 속성 집합을 포함하는 객체)
반환 값: Promise를 반환합니다. 탐색이 성공하면 true로 변환되고 탐색이 실패하거나 오류가 발생하면 false로 변환됩니다.

ps: NavigateByUrl의 사용법과 정의는 공식에서 명확하게 설명되었습니다. 하지만 절대 경로와 상대 경로의 정의에 대한 우리의 기억이 다소 모호하다면 어린 아이들이 다시 두니앙을 찾으러 가는 것을 방해하지 않도록 직접 예를 들겠습니다.

navigate():

정의: 제공된 명령 배열과 시작점 경로를 기반으로 탐색합니다. 시작점 경로를 지정하지 않으면 루트 경로에서 절대 탐색이 시작됩니다

매개 변수: 명령(any[]), extras

반환 값: Promise를 반환합니다. 탐색이 성공하면 true로 결정되고, 탐색이 실패하면 거부(reject)됩니다.
navigate의 첫 번째 매개변수는 다음과 같습니다. 배열의 형태는 any[]
입니다.

주제로 돌아가서 함수로 돌아가겠습니다. 이 두 가지 방법은 Angular에서 라우팅 점프에 사용됩니다. 그럼 실제 프로젝트에서는 다음과 같은 xxx 공통 사용법을 하나씩 살펴보겠습니다~~

실제 전투에서는 먼저 "Route a, Route b, Route c"라는 세 가지 경로를 정의합니다.

이 세 경로는 형제 경로이며 모두 루트 디렉터리에 있습니다.

---

navigateByUrl

---

E:\mySoft\Git\bin  // 绝对路径。从盘符开始
Git\bin  // 相对路径。从当前路径开始

navigateByUrl의 사용법은 비교적 간단하고 이해하기 쉬우며 사용법도 비교적 간단합니다. 다음 내비게이션의 사용법을 주로 소개합니다~~

navigate

1. 루트 b는 루트 c로 점프합니다.(루트 루트에 따라 점프)

路由a跳转到路由b
this.router.navigateByUrl('b');  // 正确。解析结果是 localhost:4200/b
this.router.navigateByUrl('./b');  // 错误。只能是绝对路径哦

路由b跳转到路由c
this.router.navigateByUrl('cascader', {});  // 解析结果是 localhost:4200/c

2. 현재 경로)

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

3. 경로 b에서 경로 b로 점프(현재 경로를 기준으로 점프)

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

4. 경로 b에서 경로 c로 점프(경로에 앵커 지점을 이동) 점프)

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

5 . 경로 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

6. 경로 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

마지막으로, 귀요미들~

라우팅 사용시 라우터 소개도 잊지 마세요~~

 在路由c中，点击浏览器的返回按钮，会忽略路由b而直接跳转回到路由b的上一层路由
this.router.navigate(['c'],{ replaceUrl:true });  // localhost:4200/c

그리고 가져온 매개변수를 출력하고 싶다면 코드 스니펫은 다음과 같습니다:

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

happyEnding…

더 많은 프로그래밍을 원하시면- 관련 지식이 있는 경우

프로그래밍 입문

을 방문하세요! !

위 내용은 NavigationByUrl에 대한 간략한 토론 및 Angular 라우팅 점프 탐색의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!