You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/en/advanced/data-fetching.md
+2-2
Original file line number
Diff line number
Diff line change
@@ -4,7 +4,7 @@ Parfois vous avez besoin de récupérer des données depuis le serveur lorsqu'un
4
4
5
5
-**Récupération de donnée après la navigation** : effectue la navigation en premier, et récupère les données dans le hook entrant du cycle de vie d'un composant. Affiche un état de chargement pendant que les données sont en train d'être récupérées.
6
6
7
-
-**Récupération de donnée avant la navigation** : récupère les données avant la navigation dans la fonction de sécurisation d'entrée de la route, et effectue la navigation après que les données aient été récupérées.
7
+
-**Récupération de donnée avant la navigation** : récupère les données avant la navigation dans la fonction d'interception d'entrée de la route, et effectue la navigation après que les données aient été récupérées.
8
8
9
9
Techniquement, les deux choix sont valides. Cela dépend de l'expérience utilisateur que vous souhaitez apporter.
10
10
@@ -71,7 +71,7 @@ export default {
71
71
72
72
## Récupération de données avant la navigation
73
73
74
-
Avec cette approche, nous récupérerons les données avant de naviguer vers la nouvelle route. Nous pouvons effectuer la récupération de données dans la fonction de sécurisation`beforeRouteEnter` du composant à venir, et seulement appeler `next` lorsque la récupération est terminée :
74
+
Avec cette approche, nous récupérerons les données avant de naviguer vers la nouvelle route. Nous pouvons effectuer la récupération de données dans la fonction d'interception`beforeRouteEnter` du composant à venir, et seulement appeler `next` lorsque la récupération est terminée :
Copy file name to clipboardExpand all lines: docs/en/advanced/navigation-guards.md
+23-23
Original file line number
Diff line number
Diff line change
@@ -1,12 +1,12 @@
1
-
# Sécurisations de navigation
1
+
# Interceptions de navigation
2
2
3
-
Comme le nom le suggère, la sécurisation de navigation fournie par `vue-router` est principalement utilisée pour sécuriser sa navigation avec des redirections ou des annulations d'accès. Il y a plusieurs hooks disponibles lors du processus de navigation : globaux, par routes ou intra-composant.
3
+
Comme le nom le suggère, l'interception de navigation fournie par `vue-router` est principalement utilisée pour intercepter la navigation avec des redirections ou des annulations d'accès. Il y a plusieurs hooks disponibles lors du processus de navigation : globaux, par route ou par composant.
4
4
5
-
Souvenez-vous de cela : **le changement de paramètre ou de query ne va pas lancer de sécurisation d'entrée ou de sortie de navigation**. Vous pouvez toujours [observer l'objet `$route`](../essentials/dynamic-matching.md#reacting-to-params-changes) pour réagir à ces changements, ou utiliser la fonction `beforeRouteUpdate` d'une sécurisation intra-composant.
5
+
Souvenez-vous de cela : **le changement de paramètre ou de query ne va pas lancer d'interception d'entrée ou de sortie de navigation**. Vous pouvez toujours [observer l'objet `$route`](../essentials/dynamic-matching.md#reacting-to-params-changes) pour réagir à ces changements, ou utiliser la fonction `beforeRouteUpdate` d'une interception par composant.
6
6
7
-
### Sécurisation globale
7
+
### Interception globale
8
8
9
-
Vous pouvez abonner une sécurisation d'entrée en utilisant `router.beforeEach` :
9
+
Vous pouvez abonner une interception d'entrée en utilisant `router.beforeEach` :
Les sécurisations d'entrées globales sont appelées lors de l'ordre de création, chaque fois qu'une navigation est déclenchée. Les sécurisations peuvent être résolues de manière asynchrone, et la navigation est considérée comme **en attente** avant que tous les hooks ne soient résolues.
19
+
Les interceptions d'entrées globales sont appelées lors de l'ordre de création, chaque fois qu'une navigation est déclenchée. Les interceptions peuvent être résolues de manière asynchrone, et la navigation est considérée comme **en attente** avant que tous les hooks ne soient résolues.
20
20
21
-
Chaque fonction de sécurisation reçoit trois arguments :
21
+
Chaque fonction d'interception reçoit trois arguments :
22
22
23
23
-**`to: Route`**: L'[objet `Route`](../api/route-object.md) cible vers lequel on navigue.
24
24
@@ -36,25 +36,25 @@ Chaque fonction de sécurisation reçoit trois arguments :
36
36
37
37
**Assurez-vous de toujours appeler la fonction `next`, sinon le hook ne sera jamais résolu.**
38
38
39
-
### Résolutions des sécurisations globales
39
+
### Résolutions des interceptions globales
40
40
41
41
> Nouveau dans la 2.5.0
42
42
43
-
Dans la 2.5.0+ vous pouvez abonner une sécurisation globale avec `router.beforeResolve`. Ceci est similaire a `router.beforeEach`, mais la différence est qu'elle sera appelée juste après que la navigation soit confirmée, **après que toutes les sécurisations intra-composants et les composants de route asynchrone ai été résolus**.
43
+
Dans la 2.5.0+ vous pouvez abonner une interception globale avec `router.beforeResolve`. Ceci est similaire a `router.beforeEach`, mais la différence est qu'elle sera appelée juste après que la navigation soit confirmée, **après que toutes les interceptions par composants et les composants de route asynchrone ai été résolus**.
44
44
45
45
### Hooks de sortie globaux
46
46
47
-
Vous pouvez également abonner des hooks de sortie, cependant, à la différence des sécurisations, ces hooks ne fournissent pas de fonction `next` et n'affecte pas la navigation :
47
+
Vous pouvez également abonner des hooks de sortie, cependant, à la différence des interceptions, ces hooks ne fournissent pas de fonction `next` et n'affecte pas la navigation :
48
48
49
49
```js
50
50
router.afterEach((to, from) => {
51
51
// ...
52
52
})
53
53
```
54
54
55
-
### Sécurisation par route
55
+
### Interception par route
56
56
57
-
Vous pouvez définir la sécurisation`beforeEnter` directement sur l'objet de configuration d'une route :
57
+
Vous pouvez définir la interception`beforeEnter` directement sur l'objet de configuration d'une route :
58
58
59
59
```js
60
60
constrouter=newVueRouter({
@@ -70,11 +70,11 @@ const router = new VueRouter({
70
70
})
71
71
```
72
72
73
-
Ces sécurisations ont exactement le même effet que les sécurisations globales d'entrée.
73
+
Ces interceptions ont exactement le même effet que les interceptions globales d'entrée.
74
74
75
-
### Sécurisation intra-composants
75
+
### Interception par composant
76
76
77
-
Enfin, vous pouvez directement définir une sécurisation de navigation a l'intérieur du composant lui-même (celui passer à la configuration du routeur) avec les options suivantes :
77
+
Enfin, vous pouvez directement définir une interception de navigation a l'intérieur du composant lui-même (celui passer à la configuration du routeur) avec les options suivantes :
78
78
79
79
-`beforeRouteEnter`
80
80
-`beforeRouteUpdate` (ajouté dans la 2.2)
@@ -86,7 +86,7 @@ const Foo = {
86
86
beforeRouteEnter (to, from, next) {
87
87
// appelée avant que la route vers le composant soit confirmée.
88
88
// cette fonction n'a pas accès à l'instance du composant avec `this`,
89
-
// car le composant n'a pas encore été créé quand cette sécurisation est appelée !
89
+
// car le composant n'a pas encore été créé quand cette interception est appelée !
90
90
},
91
91
beforeRouteUpdate (to, from, next) {
92
92
// appelée quand la route qui fait le rendu de ce composant change,
@@ -104,7 +104,7 @@ const Foo = {
104
104
}
105
105
```
106
106
107
-
La sécurisation `beforeRouteEnter`**n'**a **PAS** accès à `this`, car la sécurisation est appelée avant que la navigation soit confirmée, et le nouveau composant entrant n'a même pas encore été crée.
107
+
L'interception `beforeRouteEnter`**n'**a **PAS** accès à `this`, car l'interception est appelée avant que la navigation soit confirmée, et le nouveau composant entrant n'a même pas encore été crée.
108
108
109
109
Cependant, vous pouvez accéder à l'instance en passant dans la fonction de rappel `next`. Cette fonction de rappel va être appelée quand la navigation sera confirmée, et l'instance du composant sera passée à la fonction de rappel en tant qu'argument :
Vous pouvez directement accéder à `this` à l'intérieur de `beforeRouteLeave`. La sécurisation de sortie est utilisée pour empêcher l'utilisateur de quitter la route par accident alors qu'il n'a pas sauver ses modifications. La navigation peut être annulée en appelant `next(false)`.
119
+
Vous pouvez directement accéder à `this` à l'intérieur de `beforeRouteLeave`. L'interception de sortie est utilisée pour empêcher l'utilisateur de quitter la route par accident alors qu'il n'a pas sauver ses modifications. La navigation peut être annulée en appelant `next(false)`.
120
120
121
121
### Le flux de résolution de navigation complet
122
122
123
123
1. La navigation est demandée.
124
-
2. Appel de la sécurisation de sortie des composants désactivés (ceux que l'on va quitter).
125
-
3. Appel des sécurisations globales `beforeEach`.
126
-
4. Appel des sécurisations`beforeRouteUpdate` pour les composants ré-utilisés (2.2+).
124
+
2. Appel de la interception de sortie des composants désactivés (ceux que l'on va quitter).
125
+
3. Appel des interceptions globales `beforeEach`.
126
+
4. Appel des interceptions`beforeRouteUpdate` pour les composants ré-utilisés (2.2+).
127
127
5. Appel de `beforeEnter` dans la configuration de route.
128
128
6. Résolution des composants de route asynchrones.
129
129
7. Appel de `beforeRouteEnter` dans les composants activés (ceux où l'on va arriver).
130
-
8. Appel des sécurisations`beforeResolve` (2.5+).
130
+
8. Appel des interceptions`beforeResolve` (2.5+).
131
131
9. Confirmation de la navigation.
132
132
10. Appel des hooks globaux `afterEach`.
133
133
11. Modification du DOM demandées.
134
-
12. Appel des fonctions de rappel passées à `next` dans la sécurisation`beforeRouteEnter` avec l'instance instanciée.
134
+
12. Appel des fonctions de rappel passées à `next` dans l'interception`beforeRouteEnter` avec l'instance instanciée.
Enregistre une fonction de rappel qui sera appelée lorsqu'une erreur sera capturée pendant la navigation vers une route. Notez que pour qu'une erreur soit appelée, cela doit correspondre à l'un des scénarios suivants :
83
83
84
-
- L'erreur est lancée de manière synchrone à l'intérieur d'une fonction de sécurisation de route ;
84
+
- L'erreur est lancée de manière synchrone à l'intérieur d'une fonction d'interception de route ;
85
85
86
-
- L'erreur est capturée et traitée de manière asynchrone en appelant `next(err)` à l'intérieur d'une fonction de sécurisation de route ;
86
+
- L'erreur est capturée et traitée de manière asynchrone en appelant `next(err)` à l'intérieur d'une fonction de d'interception de route ;
87
87
88
88
- Une erreur est survenue pendant la résolution d'un composant asynchrone qui est requis pour faire le rendu d'une route.
0 commit comments