Maison > interface Web > js tutoriel > Une brève discussion sur naviguerByUrl et naviguer dans les sauts de routage angulaires

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

青灯夜游
Libérer: 2021-07-22 10:53:03
avant
3696 Les gens l'ont consulté

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

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

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  // 相对路径。从当前路径开始
Copier après la connexion

. 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
Copier après la connexion

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
Copier après la connexion

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
Copier après la connexion

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
Copier après la connexion

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
Copier après la connexion

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
Copier après la connexion

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
Copier après la connexion

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

Enfin, cuties~

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

import { Router } from '@angular/router';
constructor( private router: Router) { }
Copier après la connexion

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);
    });
}
Copier après la connexion

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!

Étiquettes associées:
source:csdn.net
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal