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
+18-19
Original file line number
Diff line number
Diff line change
@@ -1,24 +1,24 @@
1
-
# Data Fetching (En) <br><br> *Cette page est en cours de traduction française. Revenez une autre fois pour lire une traduction achevée ou [participez à la traduction française ici](https://github.com/vuejs-fr/vue-router).*
1
+
# La récupération de données
2
2
3
-
Sometimes you need to fetch data from the server when a route is activated. For example, before rendering a user profile, you need to fetch the user's data from the server. We can achieve this in two different ways:
3
+
Parfois vous avez besoin de récupérer des données depuis le serveur lorsqu'une route est activée. Par exemple, avant de faire le rendu d'un profil utilisateur, vous avez besoin de récupérer les données de l'utilisateur depuis le serveur. Nous pouvons y parvenir de deux façons différentes :
4
4
5
-
-**Fetching After Navigation**: perform the navigation first, and fetch data in the incoming component's lifecycle hook. Display a loading state while data is being fetched.
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
-
-**Fetching Before Navigation**: Fetch data before navigation in the route enter guard, and perform the navigation after data has been fetched.
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.
8
8
9
-
Technically, both are valid choices - it ultimately depends on the user experience you are aiming for.
9
+
Techniquement, les deux choix sont valides. Cela dépend de l'expérience utilisateur que vous souhaitez apporter.
10
10
11
-
## Fetching After Navigation
11
+
## Récupération de données après la navigation
12
12
13
-
When using this approach, we navigate and render the incoming component immediately, and fetch data in the component's `created`hook. It gives us the opportunity to display a loading state while the data is being fetched over the network, and we can also handle loading differently for each view.
13
+
En utilisant cette approche, nous naviguons et faisons immédiatement le rendu du composant et récupérons les données via le hook `created`du composant. Cela nous donne l'opportunité d'afficher un état de chargement pendant que les données sont récupérées à travers le réseau, et nous pouvons aussi gérer le chargement différemment pour chaque vue.
14
14
15
-
Let's assume we have a `Post`component that needs to fetch the data for a post based on`$route.params.id`:
15
+
Assumons que nous ayons un composant `Post`qui a besoin de récupérer des données pour un billet identifié par`$route.params.id`:
16
16
17
17
```html
18
18
<template>
19
19
<divclass="post">
20
20
<divclass="loading"v-if="loading">
21
-
Loading...
21
+
Chargement...
22
22
</div>
23
23
24
24
<divv-if="error"class="error">
@@ -43,19 +43,19 @@ export default {
43
43
}
44
44
},
45
45
created () {
46
-
//fetch the data when the view is created and the data is
47
-
//already being observed
46
+
//récupérer les données lorsque la vue est créée et
47
+
//que les données sont déjà observées
48
48
this.fetchData()
49
49
},
50
50
watch: {
51
-
//call again the method if the route changes
51
+
//appeler encore la méthode si la route change
52
52
'$route':'fetchData'
53
53
},
54
54
methods: {
55
55
fetchData () {
56
56
this.error=this.post=null
57
57
this.loading=true
58
-
//replace getPost with your data fetching util / API wrapper
58
+
//remplacer `getPost` par une fonction de récupération de données
59
59
getPost(this.$route.params.id, (err, post) => {
60
60
this.loading=false
61
61
if (err) {
@@ -69,10 +69,9 @@ export default {
69
69
}
70
70
```
71
71
72
-
## Fetching Before Navigation
72
+
## Récupération de données avant la navigation
73
73
74
-
With this approach we fetch the data before actually navigating to the new
75
-
route. We can perform the data fetching in the `beforeRouteEnter` guard in the incoming component, and only call `next` when the fetch is complete:
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 :
76
75
77
76
```js
78
77
exportdefault {
@@ -87,8 +86,8 @@ export default {
87
86
next(vm=>vm.setData(err, post))
88
87
})
89
88
},
90
-
//when route changes and this component is already rendered,
91
-
//the logic will be slightly different.
89
+
//quand la route change et que ce composant est déjà rendu,
90
+
//la logique est un peu différente
92
91
beforeRouteUpdate (to, from, next) {
93
92
this.post=null
94
93
getPost(to.params.id, (err, post) => {
@@ -108,4 +107,4 @@ export default {
108
107
}
109
108
```
110
109
111
-
The user will stay on the previous view while the resource is being fetched for the incoming view. It is therefore recommended to display a progress bar or some kind of indicator while the data is being fetched. If the data fetch fails, it's also necessary to display some kind of global warning message.
110
+
L'utilisateur va rester sur la vue précédente pendant que la ressource est en train d'être récupérée pour la vue à venir. Il est cependant recommandé d'afficher une barre de progression ou un autre type d'indicateur pendant que les données sont en train d'être récupérées. Si la récupération échoue, il est aussi recommandé d'afficher une sorte de message d'erreur global.
Copy file name to clipboardExpand all lines: docs/en/advanced/navigation-guards.md
+1-1
Original file line number
Diff line number
Diff line change
@@ -72,7 +72,7 @@ const router = new VueRouter({
72
72
73
73
These guards have the exact same signature as global before guards.
74
74
75
-
### In-Component Guards
75
+
### Sécurisation intra-composants
76
76
77
77
Finally, you can directly define route navigation guards inside route components (the ones passed to the router configuration) with the following options:
# Component Injections (En) <br><br> *Cette page est en cours de traduction française. Revenez une autre fois pour lire une traduction achevée ou [participez à la traduction française ici](https://github.com/vuejs-fr/vue-router).*
1
+
# Injections de composant
2
2
3
-
### Injected Properties
3
+
### Propriétés injectées
4
4
5
-
These properties are injected into every child component by passing the router instance to the root instance as the `router` option.
5
+
Ces propriétés sont injectées dans chacun des composants enfants, en passant l'instance du routeur à l'application racine de Vue en tant qu'option `router`.
6
6
7
7
-#### $router
8
8
9
-
The router instance.
9
+
L'instance du routeur.
10
10
11
11
-#### $route
12
12
13
-
The current active [Route](route-object.md). This property is read-only and its properties are immutable, but it can be watched.
13
+
La [Route](route-object.md) actuellement active. C'est une propriété en lecture seule et ses propriétés sont immutables, mais elles restent malgré tout observables.
14
14
15
-
### Enabled Options
15
+
### Options activées
16
16
17
17
-**beforeRouteEnter**
18
-
-**beforeRouteUpdate** (added in 2.2)
18
+
-**beforeRouteUpdate** (ajouté en 2.2)
19
19
-**beforeRouteLeave**
20
20
21
-
See [In Component Guards](../advanced/navigation-guards.md#incomponent-guards).
21
+
Voir la [Sécurisation intra-composants](../advanced/navigation-guards.md#securisation-intra-composants).
# Router Construction Options (En) <br><br> *Cette page est en cours de traduction française. Revenez une autre fois pour lire une traduction achevée ou [participez à la traduction française ici](https://github.com/vuejs-fr/vue-router).*
1
+
# Options de construction du routeur
2
2
3
3
### routes
4
4
5
5
- type: `Array<RouteConfig>`
6
6
7
-
Type declaration for `RouteConfig`:
7
+
Déclaration de type pour `RouteConfig`:
8
8
9
9
```js
10
10
declare type RouteConfig = {
11
11
path: string;
12
12
component?: Component;
13
-
name?: string; //for named routes
14
-
components?: { [name: string]: Component }; //for named views
13
+
name?: string; //pour les routes nommées
14
+
components?: { [name: string]: Component }; //pour les vues nommées
15
15
redirect?: string |Location|Function;
16
16
props?: boolean | string |Function;
17
17
alias?: string |Array<string>;
18
-
children?:Array<RouteConfig>; //for nested routes
18
+
children?:Array<RouteConfig>; //pour les routes imbriquées
-`hash`: uses the URL hash for routing. Works in all Vue-supported browsers, including those that do not support HTML5 History API.
34
+
-`hash` : utilise le hash de l'URL pour le routage. Fonctionne dans tous les navigateurs supportés par Vue, ainsi que ceux qui ne supportent pas l'API History d'HTML5.
35
35
36
-
-`history`: requires HTML5 History API and server config. See [HTML5 History Mode](../essentials/history-mode.md).
36
+
-`history` : nécessite l'API History d'HTML 5 et la configuration du serveur. Voir [Mode historique de HTML5](../essentials/history-mode.md).
37
37
38
-
-`abstract`: works in all JavaScript environments, e.g. server-side with Node.js. **The router will automatically be forced into this mode if no browser API is present.**
38
+
-`abstract` : fonctionne dans tous les environnements JavaScript, ex. côté serveur avec Node.js. **Le routeur sera automatiquement forcé d'utiliser ce mode si aucune API navigateur n'est présente.**
39
39
40
40
### base
41
41
42
-
- type: `string`
42
+
- type: `string`
43
43
44
-
-default: `"/"`
44
+
-défaut : `"/"`
45
45
46
-
The base URL of the app. For example, if the entire single page application is served under `/app/`, then`base`should use the value`"/app/"`.
46
+
L'URL de base de l'application. Par exemple, si l'application monopage entière est distribuée sous `/app/`, alors`base`doit utiliser la valeur`"/app/"`.
47
47
48
48
### linkActiveClass
49
49
50
-
- type: `string`
50
+
- type: `string`
51
51
52
-
-default: `"router-link-active"`
52
+
-défaut : `"router-link-active"`
53
53
54
-
Globally configure `<router-link>` default active class. Also see[router-link](router-link.md).
54
+
Configure de manière globale la classe active par défaut de `<router-link>`. Voir aussi[router-link](router-link.md).
55
55
56
56
### linkExactActiveClass
57
57
58
58
> 2.5.0+
59
59
60
-
- type: `string`
60
+
- type: `string`
61
61
62
-
- default: `"router-link-exact-active"`
62
+
- default: `"router-link-exact-active"`
63
63
64
-
Globally configure `<router-link>`default active class for exact matches. Also see[router-link](router-link.md).
64
+
Configure de manière globale la classe active par défaut de `<router-link>`lors d'une correspondance exact. Voir aussi[router-link](router-link.md).
# The Route Object (En) <br><br> *Cette page est en cours de traduction française. Revenez une autre fois pour lire une traduction achevée ou [participez à la traduction française ici](https://github.com/vuejs-fr/vue-router).*
1
+
# L'objet `Route`
2
2
3
-
A**route object**represents the state of the current active route. It contains parsed information of the current URL and the**route records**matched by the URL.
3
+
Un**objet `Route`**représente l'état actuel de la route active. Il contient des informations analysées à propos de l'URL courante et**les itinéraires de route**appariés par l'URL.
4
4
5
-
The route object is immutable. Every successful navigation will result in a fresh route object.
5
+
L'objet `Route` est immutable. Chaque navigation qui se déroule avec succès résultera en un nouvel objet `Route`.
6
6
7
-
The route object can be found in multiple places:
7
+
L'objet `Route` peut être trouvé à plusieurs endroits :
8
8
9
-
-Inside components as`this.$route`
9
+
-À l'intérieur des composants en tant que`this.$route`
10
10
11
-
-Inside `$route` watcher callbacks
11
+
-À l'intérieur des fonctions de rappel des observateurs de `$route`
12
12
13
-
-As the return value of calling`router.match(location)`
13
+
-Comme valeur de retour après l'appel de`router.match(location)`
14
14
15
-
-Inside navigation guards as the first two arguments:
15
+
-À l'intérieur des fonctions de sécurisation de la navigation, dans les deux premiers paramètres de la fonction :
16
16
17
17
```js
18
18
router.beforeEach((to, from, next) => {
19
-
//to and from are both route objects
19
+
//`to` et `from` sont tous les deux des objets Route
20
20
})
21
21
```
22
22
23
-
-Inside the `scrollBehavior`function as the first two arguments:
23
+
-À l'intérieur de la fonction `scrollBehavior`dans les deux premiers arguments:
24
24
25
25
```js
26
26
constrouter=newVueRouter({
27
27
scrollBehavior (to, from, savedPosition) {
28
-
//to and from are both route objects
28
+
//`to` et `from` sont tous les deux des objets Route
29
29
}
30
30
})
31
31
```
32
32
33
-
### Route Object Properties
33
+
### Propriétés de l'objet `Route`
34
34
35
35
-**$route.path**
36
36
37
-
- type: `string`
37
+
- type: `string`
38
38
39
-
A string that equals the path of the current route, always resolved as an absolute path. e.g.`"/foo/bar"`.
39
+
Une chaîne de caractères représentant le chemin de la route en cours, toujours résolue en tant que chemin absolu, ex :`"/foo/bar"`.
40
40
41
41
-**$route.params**
42
42
43
-
- type: `Object`
43
+
- type: `Object`
44
44
45
-
An object that contains key/value pairs of dynamic segments and star segments. If there are no params the value will be an empty object.
45
+
Un objet qui contient des pairs clé/valeur de segments dynamiques et segments*star*. S'il n'y a pas de paramètres, alors la valeur sera un objet vide.
46
46
47
47
-**$route.query**
48
48
49
-
- type: `Object`
49
+
- type: `Object`
50
50
51
-
An object that contains key/value pairs of the query string. For example, for a path`/foo?user=1`, we get`$route.query.user == 1`. If there is no query the value will be an empty object.
51
+
Un objet qui contient des pairs clé/valeur de la requête au format d'une chaîne de caractères. Par exemple, pour un chemin`/foo?user=1`, on aura`$route.query.user == 1`. S'il n'y a pas de requête, alors la valeur sera un objet vide.
52
52
53
53
-**$route.hash**
54
54
55
-
- type: `string`
55
+
- type: `string`
56
56
57
-
The hash of the current route (with the`#`), if it has one. If no hash is present the value will be an empty string.
57
+
Le hash de la route courante (avec le`#`), s'il y en a un. S'il n'y a pas de hash, alors la valeur sera une chaîne de caractères vide.
58
58
59
59
-**$route.fullPath**
60
60
61
-
- type: `string`
61
+
- type: `string`
62
62
63
-
The full resolved URL including query and hash.
63
+
L'URL entièrement résolue, incluant la requête et le hash.
64
64
65
65
-**$route.matched**
66
66
67
-
- type: `Array<RouteRecord>`
67
+
- type: `Array<RouteRecord>`
68
68
69
-
An Array containing **route records**for all nested path segments of the current route. Route records are the copies of the objects in the `routes`configuration Array (and in`children` Arrays):
69
+
Un `Array` contenant les **les itinéraires de la route**pour chaque segment de chemin imbriqué de la route courante. Les itinéraires de la route sont des copies des objets dans le tableau de configuration `routes`(et dans les tableaux`children`).
70
70
71
71
```js
72
72
constrouter=newVueRouter({
73
73
routes: [
74
-
//the following object is a route record
74
+
//l'objet qui suit est un itinéraire de route
75
75
{ path:'/foo', component: Foo,
76
76
children: [
77
-
//this is also a route record
77
+
//c'est aussi un itinéraire
78
78
{ path:'bar', component: Bar }
79
79
]
80
80
}
81
81
]
82
82
})
83
83
```
84
84
85
-
When the URL is`/foo/bar`, `$route.matched`will be an Array containing both objects (cloned), in parent to child order.
85
+
Lorsque l'URL sera`/foo/bar`, `$route.matched`sera un `Array` contenant les deux objets (clonés), dans l'ordre parent à l'enfant.
86
86
87
87
-**$route.name**
88
88
89
-
The name of the current route, if it has one. (See [Named Routes](../essentials/named-routes.md))
89
+
Le nom de la route courante, si elle en a un. (Voir [Routes nommées](../essentials/named-routes.md)).
0 commit comments