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/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:
# Scroll Behavior (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
+
# Comportement du défilement
2
2
3
-
When using client-side routing, we may want to scroll to top when navigating to a new route, or preserve the scrolling position of history entries just like real page reload does. `vue-router`allows you to achieve these and even better, allows you to completely customize the scroll behavior on route navigation.
3
+
En utilisant le routage côté client, nous pourrions vouloir faire défiler la page jusqu'en haut lorsqu'on navigue vers une nouvelle route, ou alors préserver la position du défilement des entrées de l'historique comme le ferait une page réelle. `vue-router`vous permet de faire cela et, encore mieux, vous permet de changer le comportement du défilement pendant la navigation.
4
4
5
-
**Note: this feature only works in HTML5 history mode.**
5
+
**Note : cette fonctionnalité ne fonctionne qu'avec le mode historique HTML5.**
6
6
7
-
When creating the router instance, you can provide the `scrollBehavior`function:
7
+
Pendant la création de l'instance du routeur, vous pouvez renseigner la fonction `scrollBehavior` :
8
8
9
9
```js
10
10
constrouter=newVueRouter({
11
11
routes: [...],
12
12
scrollBehavior (to, from, savedPosition) {
13
-
//return desired position
13
+
//retourner la position désirée
14
14
}
15
15
})
16
16
```
17
17
18
-
The `scrollBehavior`function receives the `to`and`from` route objects. The third argument, `savedPosition`, is only available if this is a`popstate`navigation (triggered by the browser's back/forward buttons).
18
+
La fonction `scrollBehavior`reçoit les objets de route `to`et`from`. Le troisième argument, `savedPosition`, est disponible uniquement si c'est une navigation`popstate`(déclenchée par les boutons précédent/suivant du navigateur).
19
19
20
-
The function can return a scroll position object. The object could be in the form of:
20
+
La fonction peut retourner un objet décrivant la position du défilement. L'objet peut être de la forme :
21
21
22
-
-`{ x: number, y: number }`
23
-
-`{ selector: string }`
22
+
-`{ x: number, y: number }`
23
+
-`{ selector: String }`
24
24
25
-
If a falsy value or an empty object is returned, no scrolling will happen.
25
+
Si une valeur équivalente à `false` ou un objet vide est retourné, aucun défilement ne sera produit.
26
26
27
-
For example:
27
+
Par exemple :
28
28
29
29
```js
30
30
scrollBehavior (to, from, savedPosition) {
31
31
return { x:0, y:0 }
32
32
}
33
33
```
34
34
35
-
This will simply make the page scroll to top for all route navigations.
35
+
Cela permettra de défiler au haut de page à chaque navigation à travers les routes.
36
36
37
-
Returning the`savedPosition`will result in a native-like behavior when navigating with back/forward buttons:
37
+
Retourner l'objet`savedPosition`résultera en un comportement quasi-natif en naviguant avec les boutons précédents/suivants :
We can also use [route meta fields](meta.md)to implement fine-grained scroll behavior control. Check out a full example [here](https://github.com/vuejs/vue-router/blob/dev/examples/scroll-behavior/app.js).
61
+
On peut aussi utiliser les [champs meta de route](meta.md)pour implémenter un contrôle bien précis pour le comportement du défilement. Allez voir un exemple complet [ici](https://github.com/vuejs/vue-router/blob/dev/examples/scroll-behavior/app.js).
Copy file name to clipboardExpand all lines: docs/en/advanced/transitions.md
+11-11
Original file line number
Diff line number
Diff line change
@@ -1,18 +1,18 @@
1
-
# Transitions (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
+
# Les transitions
2
2
3
-
Since the`<router-view>`is essentially a dynamic component, we can apply transition effects to it the same way using the`<transition>`component:
3
+
Vu que`<router-view>`est essentiellement un composant dynamique, on peut lui appliquer certains effets de transitions en utilisant le composant`<transition>` :
4
4
5
5
```html
6
6
<transition>
7
7
<router-view></router-view>
8
8
</transition>
9
9
```
10
10
11
-
[Everything about `<transition>`](http://vuejs.org/guide/transitions.html)works the same here.
11
+
[Tout à propos de `<transition>`](http://fr.vuejs.org/v2/guide/transitions.html)fonctionne également ici de la même manière.
12
12
13
-
### Per-Route Transition
13
+
### Transition par route
14
14
15
-
The above usage will apply the same transition for all routes. If you want each route's component to have different transitions, you can instead use `<transition>`with different names inside each route component:
15
+
L'utilisation au dessus applique la même transition pour chaque route. Si vous voulez que les composants de route aient des transitions différentes, vous pouvez utiliser à la place `<transition>`avec des noms différents à l'intérieur de chaque composant de route :
16
16
17
17
```js
18
18
constFoo= {
@@ -32,20 +32,20 @@ const Bar = {
32
32
}
33
33
```
34
34
35
-
### Route-Based Dynamic Transition
35
+
#Transition dynamique basée sur la route
36
36
37
-
It is also possible to determine the transition to use dynamically based on the relationship between the target route and current route:
37
+
Il est aussi possible de déterminer la transition à utiliser en se basant sur la relation entre la route cible et la route actuelle :
38
38
39
39
```html
40
-
<!--use a dynamic transition name-->
40
+
<!--utiliser un nom de transition dynamique-->
41
41
<transition:name="transitionName">
42
42
<router-view></router-view>
43
43
</transition>
44
44
```
45
45
46
46
```js
47
-
//then, in the parent component,
48
-
//watch the $route to determine the transition to use
47
+
//et dans le composant parent,
48
+
//observer la `$route` pour déterminer la transition à utiliser
49
49
watch: {
50
50
'$route' (to, from) {
51
51
consttoDepth=to.path.split('/').length
@@ -55,4 +55,4 @@ watch: {
55
55
}
56
56
```
57
57
58
-
See full example [here](https://github.com/vuejs/vue-router/blob/dev/examples/transitions/app.js).
58
+
Voir un exemple complet [ici](https://github.com/vuejs/vue-router/blob/dev/examples/transitions/app.js).
# 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).
0 commit comments