Une brève discussion sur naviguerByUrl et naviguer dans les sauts de routage angulaires

Cet article vous présentera AngularnavigableByUrl et naviguera dans le saut de routage du routeur, et verra comment utiliser naviguer() et naviguerByUrl().

Avant de commencer le combat proprement dit, jetons un œil à l'introduction denavigaByUrl et naviguons dans les documents officiels. [Recommandation de tutoriel associée : "tutoriel angulaire"]

navigateByUrl() :

Définition : Naviguez en fonction de l'URL fournie, doit utiliser un chemin absolu
Paramètres : url (string | UrlReee), extras (An objet contenant un ensemble de propriétés qui modifieront la stratégie de navigation)
Valeur de retour : renvoie une promesse. Lorsque la navigation réussit, elle sera résolue en vrai ; lorsque la navigation échoue ou qu'une erreur se produit, elle sera résolue en faux.

ps : L'utilisation et la définition de naviguerByUrl ont été clairement expliquées par le responsable. Cependant, si notre souvenir de la définition du chemin absolu et du chemin relatif est un peu vague, alors je vais donner un exemple directement pour ne pas déranger les petits à aller retrouver Du Niang qui m'a rendu prévenant

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

. navigate() :

Définition : Naviguez en fonction du tableau de commandes fourni et de l'itinéraire du point de départ. Si l'itinéraire du point de départ n'est pas spécifié, la navigation absolue commence à partir de l'itinéraire racine
Paramètres : commandes (any[]), extras
Valeur de retour : renvoie une promesse. Lorsque la navigation réussit, elle sera résolue en vrai ; lorsque la navigation échoue, elle sera résolue en faux ; lorsque la navigation échoue, elle sera rejetée (rejeter)

Il est à noter que le premier paramètre de navigate doit être dans la forme d'un tableau C'est any[].

Revenons au sujet et revenons à la fonction. Ces deux méthodes sont utilisées pour le routage des sauts dans Angular. Nous avons donc les xxx usages courants suivants dans les projets réels. Examinons-les un par un ~~

---

Dans le combat réel, nous définissons d'abord trois itinéraires, à savoir "Route a, Route b, Route c".
Ces trois routes sont des routes sœurs et se trouvent toutes dans le répertoire racine. L'utilisation de

---

navigateByUrl

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

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

navigateByUrl est relativement simple, facile à comprendre et l'utilisation est relativement simple. Nous introduisons principalement l'utilisation de la navigation suivante ~~

navigate

1. La route b saute vers la route c (saut en fonction de la route racine)

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

2. itinéraire actuel)

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. Sauter de l'itinéraire b à l'itinéraire b (sauter en fonction de l'itinéraire actuel)

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

4 Sauter de l'itinéraire b à l'itinéraire c (porter le point d'ancrage dans l'itinéraire) Sauter)

this.router.navigate(['c'],{ fragment:'zita' });  // localhost:4200/c#zita
	现在么，成功跳转到路由c了。我又想从路由c跳转到路由a（携带锚点跳转）
	this.router.navigate(['a'], { preserveFragment: true});  // localhost:4200/a#zita

5. . La route b passe à la route c (les paramètres sont transmis dans la route à sauter)

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. La route b passe à la route c (l'état actuel ne sera pas enregistré dans l'historique pendant la navigation)

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

Enfin, cuties~

N'oubliez pas d'introduire le routeur lors de l'utilisation du routage~~

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

De plus, si vous souhaitez imprimer les paramètres apportés, l'extrait de code est le suivant :

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

happyEnding…

Pour plus de programmation- connaissances connexes, veuillez visiter : Introduction à la programmation ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!