*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).*
+# Routes imbriquées
-Real app UIs are usually composed of components that are nested multiple levels deep. It is also very common that the segments of a URL corresponds to a certain structure of nested components, for example:
+Les vrais interfaces utilisateurs d'application sont faites de composants imbriqués à de multiples niveaux de profondeur. Il est aussi très commun que les segments d'URLs correspondent à une certaine structure de composants imbriqués, par exemple :
```
-/user/foo/profile /user/foo/posts
-+------------------+ +-----------------+
-| User | | User |
-| +--------------+ | | +-------------+ |
-| | Profile | | +------------> | | Posts | |
-| | | | | | | |
-| +--------------+ | | +-------------+ |
-+------------------+ +-----------------+
+/utilisateur/foo/profil /utilisateur/foo/billets
++---------------------+ +--------------------+
+| User | | User |
+| +-----------------+ | | +----------------+ |
+| | Profile | | +------------> | | Posts | |
+| | | | | | | |
+| +-----------------+ | | +----------------+ |
++---------------------+ +--------------------+
```
-With `vue-router`, it is very simple to express this relationship using nested route configurations.
+Avec `vue-router`, il est vraiment très simple d'exprimer cette relation en utilisant des configurations de route imbriquées.
-Given the app we created in the last chapter:
+Reprenons l'application créée au chapitre précédent :
``` html
@@ -25,46 +25,45 @@ Given the app we created in the last chapter:
``` js
const User = {
- template: '
User {{ $route.params.id }}
'
+ template: '
Utilisateur {{ $route.params.id }}
'
}
const router = new VueRouter({
routes: [
- { path: '/user/:id', component: User }
+ { path: '/utilisateur/:id', component: User }
]
})
```
-The `` here is a top-level outlet. It renders the component matched by a top level route. Similarly, a rendered component can also contain its own, nested ``. For example, if we add one inside the `User` component's template:
+Ici le `` est une balise de premier niveau. Il fait le rendu des composants qui concordent avec une route de premier niveau. De la même façon, un composant de rendu peut contenir également sa propre balise `` imbriquée. Par exemple, ajoutons en une à l'intérieur du template du composant `User` :
``` js
const User = {
template: `
-
User {{ $route.params.id }}
+
Utilisateur {{ $route.params.id }}
`
}
```
-To render components into this nested outlet, we need to use the `children`
-option in `VueRouter` constructor config:
+Pour faire le rendu de composants à l'intérieur des balises imbriquées, nous avons besoin d'utiliser l'option `children` dans la configuration du constructeur de `VueRouter` :
``` js
const router = new VueRouter({
routes: [
- { path: '/user/:id', component: User,
+ { path: '/utilisateur/:id', component: User,
children: [
{
- // UserProfile will be rendered inside User's
- // when /user/:id/profile is matched
+ // `UserProfile` va être rendu à l'intérieur du `` de `User`
+ // quand `/utilisateur/:id/profil` concorde
path: 'profile',
component: UserProfile
},
{
- // UserPosts will be rendered inside User's
- // when /user/:id/posts is matched
+ // `UserPosts` va être rendu à l'intérieur du `` de `User`
+ // quand `/utilisateur/:id/billets` concorde
path: 'posts',
component: UserPosts
}
@@ -74,27 +73,27 @@ const router = new VueRouter({
})
```
-**Note that nested paths that start with `/` will be treated as a root path. This allows you to leverage the component nesting without having to use a nested URL.**
+**Notez que les chemins imbriqués commençant par `/` vont être traités comme des chemins partant de la racine. Cela vous permet d'adresser des composants imbriqués sans avoir à utiliser une URL imbriquée.**
-As you can see the `children` option is just another Array of route configuration objects like `routes` itself. Therefore, you can keep nesting views as much as you need.
+Comme vous pouvez le voir, l'option `children` n'est qu'un autre tableau d'objet de configuration de route comme dans `routes`. Et donc, vous pouvez garder les vues imbriquées au plus près de vos besoins.
-At this point, with the above configuration, when you visit `/user/foo`, nothing will be rendered inside `User`'s outlet, because no sub route is matched. Maybe you do want to render something there. In such case you can provide an empty subroute path:
+À ce niveau, avec la configuration ci-dessus, quand vous visitez `/utilisateur/foo`, rien ne sera rendu dans la partie `User`, car aucune sous route ne concorde. Peut-être voudriez vous afficher quelque chose ici. Dans ce cas, vous pouvez fournir une sous route vide :
``` js
const router = new VueRouter({
routes: [
{
- path: '/user/:id', component: User,
+ path: '/utilisateur/:id', component: User,
children: [
- // UserHome will be rendered inside User's
- // when /user/:id is matched
+ // `UserProfile` va être rendu à l'intérieur du `` de `User`
+ // quand `/utilisateur/:id` concorde
{ path: '', component: UserHome },
- // ...other sub routes
+ // ...autres sous routes
]
}
]
})
```
-A working demo of this example can be found [here](http://jsfiddle.net/yyx990803/L7hscd8h/).
+Une démo de fonctionnement de cet exemple peut-être trouvée [ici](http://jsfiddle.net/yyx990803/L7hscd8h/).
diff --git a/docs/fr/README.md b/docs/fr/README.md
new file mode 100644
index 000000000..f8a898044
--- /dev/null
+++ b/docs/fr/README.md
@@ -0,0 +1 @@
+{% include "./SUMMARY.md" %}
diff --git a/docs/fr/SUMMARY.md b/docs/fr/SUMMARY.md
new file mode 100644
index 000000000..8c11415e9
--- /dev/null
+++ b/docs/fr/SUMMARY.md
@@ -0,0 +1,32 @@
+# vue-router 2
+
+> Note: vue-router@2.x fonctionne uniquement avec Vue 2.x. La doc pour la 0.7.x est [ici](https://github.com/vuejs/vue-router/tree/1.0/docs/en).
+
+**[Notes de release](https://github.com/vuejs/vue-router/releases)**
+
+- [Installation](installation.md)
+- Essentiel
+ - [Pour commencer](essentials/getting-started.md)
+ - [Dynamic Route Matching (En)](essentials/dynamic-matching.md)
+ - [Nested Routes (En)](essentials/nested-routes.md)
+ - [Programmatic Navigation (En)](essentials/navigation.md)
+ - [Named Routes (En)](essentials/named-routes.md)
+ - [Named Views (En)](essentials/named-views.md)
+ - [Redirect and Alias (En)](essentials/redirect-and-alias.md)
+ - [Passing Props to Route Components (En)](essentials/passing-props.md)
+ - [HTML5 History Mode (En)](essentials/history-mode.md)
+- Avancé
+ - [Navigation Guards (En)](advanced/navigation-guards.md)
+ - [Route Meta Fields (En)](advanced/meta.md)
+ - [Transitions (En)](advanced/transitions.md)
+ - [La récupération de données](advanced/data-fetching.md)
+ - [Les transitions](advanced/transitions.md)
+ - [Comportement du défilement](advanced/scroll-behavior.md)
+ - [Le chargement à la volée](advanced/lazy-loading.md)
+- Réference de l'API
+ - [router-link](api/router-link.md)
+ - [router-view](api/router-view.md)
+ - [L'objet Route](api/route-object.md)
+ - [Options de construction du routeur](api/options.md)
+ - [L'Instance du routeur](api/router-instance.md)
+ - [Injections de composant](api/component-injections.md)
\ No newline at end of file
diff --git a/docs/fr/advanced/data-fetching.md b/docs/fr/advanced/data-fetching.md
new file mode 100644
index 000000000..29f67715c
--- /dev/null
+++ b/docs/fr/advanced/data-fetching.md
@@ -0,0 +1,110 @@
+# La récupération de données
+
+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 :
+
+- **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.
+
+- **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.
+
+Techniquement, les deux choix sont valides. Cela dépend de l'expérience utilisateur que vous souhaitez apporter.
+
+## Récupération de données après la navigation
+
+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.
+
+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` :
+
+``` html
+
+
+
+ Chargement...
+
+
+
+ {{ error }}
+
+
+
+
{{ post.title }}
+
{{ post.body }}
+
+
+
+```
+
+``` js
+export default {
+ data () {
+ return {
+ loading: false,
+ post: null,
+ error: null
+ }
+ },
+ created () {
+ // récupérer les données lorsque la vue est créée et
+ // que les données sont déjà observées
+ this.fetchData()
+ },
+ watch: {
+ // appeler encore la méthode si la route change
+ '$route': 'fetchData'
+ },
+ methods: {
+ fetchData () {
+ this.error = this.post = null
+ this.loading = true
+ // remplacer `getPost` par une fonction de récupération de données
+ getPost(this.$route.params.id, (err, post) => {
+ this.loading = false
+ if (err) {
+ this.error = err.toString()
+ } else {
+ this.post = post
+ }
+ })
+ }
+ }
+}
+```
+
+## Récupération de données avant la navigation
+
+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 :
+
+``` js
+export default {
+ data () {
+ return {
+ post: null,
+ error: null
+ }
+ },
+ beforeRouteEnter (to, from, next) {
+ getPost(to.params.id, (err, post) => {
+ next(vm => vm.setData(err, post))
+ })
+ },
+ // quand la route change et que ce composant est déjà rendu,
+ // la logique est un peu différente
+ beforeRouteUpdate (to, from, next) {
+ this.post = null
+ getPost(to.params.id, (err, post) => {
+ this.setData(err, post)
+ next()
+ })
+ },
+ methods: {
+ setData (err, post) {
+ if (err) {
+ this.error = err.toString()
+ } else {
+ this.post = post
+ }
+ }
+ }
+}
+```
+
+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.
diff --git a/docs/fr/advanced/lazy-loading.md b/docs/fr/advanced/lazy-loading.md
new file mode 100644
index 000000000..728f6403a
--- /dev/null
+++ b/docs/fr/advanced/lazy-loading.md
@@ -0,0 +1,47 @@
+# Le chargement à la volée
+
+Pendant la construction d'applications avec un empaqueteur (« bundler »), le paquetage JavaScript peut devenir un peu lourd, et donc cela peut affecter le temps de chargement de la page. Il serait plus efficace si l'on pouvait séparer chaque composant de route dans des fragments séparés, et de les charger uniquement lorsque la route est visitée.
+
+En combinant la [fonctionnalité de composant asynchrone](https://fr.vuejs.org/v2/guide/components.html#Composants-asynchrones) de Vue et la [fonctionnalité de séparation de code](https://webpack.js.org/guides/code-splitting-async/) de webpack, il est très facile de charger à la volée les composants de route.
+
+Premièrement, un composant asynchrone peut définir une fonction fabrique qui retourne une Promesse (qui devrait résoudre le composant lui-même) :
+
+``` js
+const Foo = () => Promise.resolve({ /* définition du composant */ })
+```
+
+Deuxièmement, avec webpack 2, nous pouvons utiliser la syntaxe d'[import dynamique](https://github.com/tc39/proposal-dynamic-import) pour indiquer un point de scission de code :
+
+``` js
+import('./Foo.vue') // returns a Promise
+```
+
+> Note: if you are using Babel, you will need to add the [syntax-dynamic-import](http://babeljs.io/docs/plugins/syntax-dynamic-import/) plugin so that Babel can properly parse the syntax.
+
+Combining the two, this is how to define an async component that will be automatically code-split by webpack:
+
+``` js
+const Foo = () => import('./Foo.vue')
+```
+
+Rien n'a besoin d'être modifié dans la configuration de la route, utilisez `Foo` comme d'habitude.
+
+``` js
+const router = new VueRouter({
+ routes: [
+ { path: '/foo', component: Foo }
+ ]
+})
+```
+
+### Grouper des composants dans le même fragment
+
+Parfois on aimerait grouper tous les composants imbriqués sous la même route, dans un seul et même fragment asynchrone. Pour arriver à cela, nous avons besoin d'utiliser les [fragments nommés](https://webpack.js.org/guides/code-splitting-async/#chunk-names) en donnant un nom au fragment en utilisant une syntaxe de commentaire spéciale (requires webpack > 2.4) :
+
+``` js
+const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')
+const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue')
+const Baz = () => import(/* webpackChunkName: "group-foo" */ './Baz.vue')
+```
+
+webpack groupera tous les modules asynchrones avec le même nom de fragment dans le même fragment asynchrone.
diff --git a/docs/fr/advanced/meta.md b/docs/fr/advanced/meta.md
new file mode 100644
index 000000000..998b6c134
--- /dev/null
+++ b/docs/fr/advanced/meta.md
@@ -0,0 +1,51 @@
+# Route Meta Fields (En)
*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).*
+
+You can include a `meta` field when defining a route:
+
+``` js
+const router = new VueRouter({
+ routes: [
+ {
+ path: '/foo',
+ component: Foo,
+ children: [
+ {
+ path: 'bar',
+ component: Bar,
+ // a meta field
+ meta: { requiresAuth: true }
+ }
+ ]
+ }
+ ]
+})
+```
+
+So how do we access this `meta` field?
+
+First, each route object in the `routes` configuration is called a **route record**. Route records may be nested. Therefore when a route is matched, it can potentially match more than one route record.
+
+For example, with the above route config, the URL `/foo/bar` will match both the parent route record and the child route record.
+
+All route records matched by a route are exposed on the `$route` object (and also route objects in navigation guards) as the `$route.matched` Array. Therefore, we will need to iterate over `$route.matched` to check for meta fields in route records.
+
+An example use case is checking for a meta field in the global navigation guard:
+
+``` js
+router.beforeEach((to, from, next) => {
+ if (to.matched.some(record => record.meta.requiresAuth)) {
+ // this route requires auth, check if logged in
+ // if not, redirect to login page.
+ if (!auth.loggedIn()) {
+ next({
+ path: '/login',
+ query: { redirect: to.fullPath }
+ })
+ } else {
+ next()
+ }
+ } else {
+ next() // make sure to always call next()!
+ }
+})
+```
diff --git a/docs/fr/advanced/navigation-guards.md b/docs/fr/advanced/navigation-guards.md
new file mode 100644
index 000000000..97dfb6903
--- /dev/null
+++ b/docs/fr/advanced/navigation-guards.md
@@ -0,0 +1,134 @@
+# Navigation Guards (En)
*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).*
+
+As the name suggests, the navigation guards provided by `vue-router` are primarily used to guard navigations either by redirecting it or canceling it. There are a number of ways to hook into the route navigation process: globally, per-route, or in-component.
+
+Remember that **params or query changes won't trigger enter/leave navigation guards**. You can either [watch the `$route` object](../essentials/dynamic-matching.md#reacting-to-params-changes) to react to those changes, or use the `beforeRouteUpdate` in-component guard.
+
+### Global Guards
+
+You can register global before guards using `router.beforeEach`:
+
+``` js
+const router = new VueRouter({ ... })
+
+router.beforeEach((to, from, next) => {
+ // ...
+})
+```
+
+Global before guards are called in creation order, whenever a navigation is triggered. Guards may be resolved asynchronously, and the navigation is considered **pending** before all hooks have been resolved.
+
+Every guard function receives three arguments:
+
+- **`to: Route`**: the target [Route Object](../api/route-object.md) being navigated to.
+
+- **`from: Route`**: the current route being navigated away from.
+
+- **`next: Function`**: this function must be called to **resolve** the hook. The action depends on the arguments provided to `next`:
+
+ - **`next()`**: move on to the next hook in the pipeline. If no hooks are left, the navigation is **confirmed**.
+
+ - **`next(false)`**: abort the current navigation. If the browser URL was changed (either manually by the user or via back button), it will be reset to that of the `from` route.
+
+ - **`next('/')` or `next({ path: '/' })`**: redirect to a different location. The current navigation will be aborted and a new one will be started.
+
+ - **`next(error)`**: (2.4.0+) if the argument passed to `next` is an instance of `Error`, the navigation will be aborted and the error will be passed to callbacks registered via `router.onError()`.
+
+**Make sure to always call the `next` function, otherwise the hook will never be resolved.**
+
+### Global Resolve Guards
+
+> New in 2.5.0
+
+In 2.5.0+ you can register a global guard with `router.beforeResolve`. This is similar to `router.beforeEach`, with the difference that resolve guards will be called right before the navigation is confirmed, **after all in-component guards and async route components are resolved**.
+
+### Global After Hooks
+
+You can also register global after hooks, however unlike guards, these hooks do not get a `next` function and cannot affect the navigation:
+
+``` js
+router.afterEach((to, from) => {
+ // ...
+})
+```
+
+### Per-Route Guard
+
+You can define `beforeEnter` guards directly on a route's configuration object:
+
+``` js
+const router = new VueRouter({
+ routes: [
+ {
+ path: '/foo',
+ component: Foo,
+ beforeEnter: (to, from, next) => {
+ // ...
+ }
+ }
+ ]
+})
+```
+
+These guards have the exact same signature as global before guards.
+
+### Sécurisation intra-composants
+
+Finally, you can directly define route navigation guards inside route components (the ones passed to the router configuration) with the following options:
+
+- `beforeRouteEnter`
+- `beforeRouteUpdate` (added in 2.2)
+- `beforeRouteLeave`
+
+``` js
+const Foo = {
+ template: `...`,
+ beforeRouteEnter (to, from, next) {
+ // called before the route that renders this component is confirmed.
+ // does NOT have access to `this` component instance,
+ // because it has not been created yet when this guard is called!
+ },
+ beforeRouteUpdate (to, from, next) {
+ // called when the route that renders this component has changed,
+ // but this component is reused in the new route.
+ // For example, for a route with dynamic params /foo/:id, when we
+ // navigate between /foo/1 and /foo/2, the same Foo component instance
+ // will be reused, and this hook will be called when that happens.
+ // has access to `this` component instance.
+ },
+ beforeRouteLeave (to, from, next) {
+ // called when the route that renders this component is about to
+ // be navigated away from.
+ // has access to `this` component instance.
+ }
+}
+```
+
+The `beforeRouteEnter` guard does **NOT** have access to `this`, because the guard is called before the navigation is confirmed, thus the new entering component has not even been created yet.
+
+However, you can access the instance by passing a callback to `next`. The callback will be called when the navigation is confirmed, and the component instance will be passed to the callback as the argument:
+
+``` js
+beforeRouteEnter (to, from, next) {
+ next(vm => {
+ // access to component instance via `vm`
+ })
+}
+```
+
+You can directly access `this` inside `beforeRouteLeave`. The leave guard is usually used to prevent the user from accidentally leaving the route with unsaved edits. The navigation can be canceled by calling `next(false)`.
+
+### The Full Navigation Resolution Flow
+
+1. Navigation triggered
+2. Call leave guards in deactivated components
+3. Call global `beforeEach` guards
+4. Call `beforeRouteUpdate` guards in reused components (2.2+)
+5. Call `beforeEnter` in route configs
+6. Resolve async route components
+7. Call `beforeRouteEnter` in activated components
+8. Call global `beforeResolve` guards (2.5+)
+9. Navigation confirmed.
+10. Call global `afterEach` hooks.
+11. DOM updates triggered.
+12. Call callbacks passed to `next` in `beforeRouteEnter` guards with instantiated instances.
diff --git a/docs/fr/advanced/scroll-behavior.md b/docs/fr/advanced/scroll-behavior.md
new file mode 100644
index 000000000..2d176188c
--- /dev/null
+++ b/docs/fr/advanced/scroll-behavior.md
@@ -0,0 +1,61 @@
+# Comportement du défilement
+
+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.
+
+**Note : cette fonctionnalité ne fonctionne qu'avec le mode historique HTML5.**
+
+Pendant la création de l'instance du routeur, vous pouvez renseigner la fonction `scrollBehavior` :
+
+``` js
+const router = new VueRouter({
+ routes: [...],
+ scrollBehavior (to, from, savedPosition) {
+ // retourner la position désirée
+ }
+})
+```
+
+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).
+
+La fonction peut retourner un objet décrivant la position du défilement. L'objet peut être de la forme :
+
+- `{ x: number, y: number }`
+- `{ selector: String }`
+
+Si une valeur équivalente à `false` ou un objet vide est retourné, aucun défilement ne sera produit.
+
+Par exemple :
+
+``` js
+scrollBehavior (to, from, savedPosition) {
+ return { x: 0, y: 0 }
+}
+```
+
+Cela permettra de défiler au haut de page à chaque navigation à travers les routes.
+
+Retourner l'objet `savedPosition` résultera en un comportement quasi-natif en naviguant avec les boutons précédents/suivants :
+
+``` js
+scrollBehavior (to, from, savedPosition) {
+ if (savedPosition) {
+ return savedPosition
+ } else {
+ return { x: 0, y: 0 }
+ }
+}
+```
+
+Si vous voulez simuler le comportement « aller à l'ancre » :
+
+``` js
+scrollBehavior (to, from, savedPosition) {
+ if (to.hash) {
+ return {
+ selector: to.hash
+ }
+ }
+}
+```
+
+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).
diff --git a/docs/fr/advanced/transitions.md b/docs/fr/advanced/transitions.md
new file mode 100644
index 000000000..d90dc45cc
--- /dev/null
+++ b/docs/fr/advanced/transitions.md
@@ -0,0 +1,58 @@
+# Les transitions
+
+Vu que `` est essentiellement un composant dynamique, on peut lui appliquer certains effets de transitions en utilisant le composant `` :
+
+``` html
+
+
+
+```
+
+[Tout à propos de ``](http://fr.vuejs.org/v2/guide/transitions.html) fonctionne également ici de la même manière.
+
+### Transition par route
+
+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 `` avec des noms différents à l'intérieur de chaque composant de route :
+
+``` js
+const Foo = {
+ template: `
+
+
...
+
+ `
+}
+
+const Bar = {
+ template: `
+
+
...
+
+ `
+}
+```
+
+# Transition dynamique basée sur la route
+
+Il est aussi possible de déterminer la transition à utiliser en se basant sur la relation entre la route cible et la route actuelle :
+
+``` html
+
+
+
+
+```
+
+``` js
+// et dans le composant parent,
+// observer la `$route` pour déterminer la transition à utiliser
+watch: {
+ '$route' (to, from) {
+ const toDepth = to.path.split('/').length
+ const fromDepth = from.path.split('/').length
+ this.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left'
+ }
+}
+```
+
+Voir un exemple complet [ici](https://github.com/vuejs/vue-router/blob/dev/examples/transitions/app.js).
diff --git a/docs/fr/api/component-injections.md b/docs/fr/api/component-injections.md
new file mode 100644
index 000000000..c98415a6b
--- /dev/null
+++ b/docs/fr/api/component-injections.md
@@ -0,0 +1,21 @@
+# Injections de composant
+
+### Propriétés injectées
+
+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`.
+
+- #### $router
+
+ L'instance du routeur.
+
+- #### $route
+
+ 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.
+
+### Options activées
+
+- **beforeRouteEnter**
+- **beforeRouteUpdate** (ajouté en 2.2)
+- **beforeRouteLeave**
+
+ Voir la [Sécurisation intra-composants](../advanced/navigation-guards.md#securisation-intra-composants).
diff --git a/docs/fr/api/options.md b/docs/fr/api/options.md
new file mode 100644
index 000000000..ee608d967
--- /dev/null
+++ b/docs/fr/api/options.md
@@ -0,0 +1,88 @@
+# Options de construction du routeur
+
+### routes
+
+- type: `Array`
+
+ Déclaration de type pour `RouteConfig` :
+
+ ``` js
+ declare type RouteConfig = {
+ path: string;
+ component?: Component;
+ name?: string; // pour les routes nommées
+ components?: { [name: string]: Component }; // pour les vues nommées
+ redirect?: string | Location | Function;
+ props?: boolean | string | Function;
+ alias?: string | Array;
+ children?: Array; // pour les routes imbriquées
+ beforeEnter?: (to: Route, from: Route, next: Function) => void;
+ meta?: any;
+ }
+ ```
+
+### mode
+
+- type : `string`
+
+- défaut : `"hash" (dans le navigateur) | "abstract" (en Node.js)`
+
+- valeurs disponibles : `"hash" | "history" | "abstract"`
+
+ Configure le mode du routeur.
+
+ - `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.
+
+ - `history` : nécessite l'API History d'HTML 5 et la configuration du serveur. Voir [Mode historique de HTML5](../essentials/history-mode.md).
+
+ - `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.**
+
+### base
+
+- type : `string`
+
+- défaut : `"/"`
+
+ 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/"`.
+
+### linkActiveClass
+
+- type : `string`
+
+- défaut : `"router-link-active"`
+
+ Configure de manière globale la classe active par défaut de ``. Voir aussi [router-link](router-link.md).
+
+### linkExactActiveClass
+
+> 2.5.0+
+
+- type : `string`
+
+- default : `"router-link-exact-active"`
+
+ Configure de manière globale la classe active par défaut de `` lors d'une correspondance exact. Voir aussi [router-link](router-link.md).
+
+### scrollBehavior
+
+- type : `Function`
+
+ Signature :
+
+ ```
+ (
+ to: Route,
+ from: Route,
+ savedPosition?: { x: number, y: number }
+ ) => { x: number, y: number } | { selector: string } | ?{}
+ ```
+
+ Pour plus de détails, voir [Comportement du Scroll](../advanced/scroll-behavior.md).
+
+### parseQuery / stringifyQuery
+
+> 2.4.0+
+
+- type : `Function`
+
+ Permet de spécifier des fonctions personnalisées pour formater en objet ou en chaîne de caractères la requête. Surcharge les fonctions par défaut.
diff --git a/docs/fr/api/route-object.md b/docs/fr/api/route-object.md
new file mode 100644
index 000000000..fb9696c34
--- /dev/null
+++ b/docs/fr/api/route-object.md
@@ -0,0 +1,89 @@
+# L'objet `Route`
+
+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.
+
+L'objet `Route` est immutable. Chaque navigation qui se déroule avec succès résultera en un nouvel objet `Route`.
+
+L'objet `Route` peut être trouvé à plusieurs endroits :
+
+- À l'intérieur des composants en tant que `this.$route`
+
+- À l'intérieur des fonctions de rappel des observateurs de `$route`
+
+- Comme valeur de retour après l'appel de `router.match(location)`
+
+- À l'intérieur des fonctions de sécurisation de la navigation, dans les deux premiers paramètres de la fonction :
+
+ ``` js
+ router.beforeEach((to, from, next) => {
+ // `to` et `from` sont tous les deux des objets Route
+ })
+ ```
+
+- À l'intérieur de la fonction `scrollBehavior` dans les deux premiers arguments :
+
+ ``` js
+ const router = new VueRouter({
+ scrollBehavior (to, from, savedPosition) {
+ // `to` et `from` sont tous les deux des objets Route
+ }
+ })
+ ```
+
+### Propriétés de l'objet `Route`
+
+- **$route.path**
+
+ - type : `string`
+
+ 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"`.
+
+- **$route.params**
+
+ - type : `Object`
+
+ 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.
+
+- **$route.query**
+
+ - type : `Object`
+
+ 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.
+
+- **$route.hash**
+
+ - type : `string`
+
+ 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.
+
+- **$route.fullPath**
+
+ - type : `string`
+
+ L'URL entièrement résolue, incluant la requête et le hash.
+
+- **$route.matched**
+
+ - type : `Array`
+
+ 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`).
+
+ ``` js
+ const router = new VueRouter({
+ routes: [
+ // l'objet qui suit est un itinéraire de route
+ { path: '/foo', component: Foo,
+ children: [
+ // c'est aussi un itinéraire
+ { path: 'bar', component: Bar }
+ ]
+ }
+ ]
+ })
+ ```
+
+ Lorsque l'URL sera `/foo/bar`, `$route.matched` sera un `Array` contenant les deux objets (clonés), dans l'ordre parent à l'enfant.
+
+- **$route.name**
+
+ Le nom de la route courante, si elle en a un. (Voir [Routes nommées](../essentials/named-routes.md)).
diff --git a/docs/fr/api/router-instance.md b/docs/fr/api/router-instance.md
new file mode 100644
index 000000000..2f3d98562
--- /dev/null
+++ b/docs/fr/api/router-instance.md
@@ -0,0 +1,86 @@
+# L'Instance du routeur
+
+### Propriétés
+
+#### router.app
+
+- type: `instance de Vue`
+
+ L'instance racine de Vue dans laquelle l'instance de `routeur` a été injectée.
+
+#### router.mode
+
+- type: `string`
+
+ Le [mode](options.md#mode) que le routeur utilise.
+
+#### router.currentRoute
+
+- type: `Route`
+
+ La route actuelle représentée en tant qu'un [objet route](route-object.md).
+
+### Méthodes
+
+- **router.beforeEach(guard)**
+- **router.beforeResolve(guard)** (2.5.0+)
+- **router.afterEach(hook)**
+
+ Ajout de sécurités globales de navigation. Voir les [sécurités de navigation](../advanced/navigation-guards.md).
+
+ Dans la version 2.5.0+, ces trois méthodes retournent une fonction qui enlève les fonctions de sécurisations et hooks enregistrés.
+
+- **router.push(location, onComplete?, onAbort?)**
+- **router.replace(location, onComplete?, onAbort?)**
+- **router.go(n)**
+- **router.back()**
+- **router.forward()**
+
+ Navigue à une nouvelle URL de façon programmée. Voir [Navigation de façon programmée](../essentials/navigation.md).
+
+- **router.getMatchedComponents(location?)**
+
+ Retourne un tableau de composants (définition/constructeur et non les instances) correspondant à la `location` passée en paramètre, ou alors de la route actuelle. Cette fonction est principalement utilisée pendant le rendu côté serveur afin d'effectuer une pré-récupération des données.
+
+- **router.resolve(location, current?, append?)**
+
+ > 2.1.0+
+
+ Inverse la résolution d'URL. La `location` doit avoir la même forme qu'utilisée dans ``, retourne un objet avec les propriétés suivantes :
+
+ ``` js
+ {
+ location: Location;
+ route: Route;
+ href: string;
+ }
+ ```
+
+
+- **router.addRoutes(routes)**
+
+ > 2.2.0+
+
+ Permet d'ajouter dynamiquement des routes au routeur. L'argument doit être un tableau utilisant le même format de configuration que l'option `routes` du constructeur.
+
+- **router.onReady(callback, [errorCallback])**
+
+ > 2.2.0+
+
+ Cette méthode met en file d'attente une fonction de rappel qui sera appelée lorsque le routeur aura complété la navigation initiale, ce qui signifie qu'il a résolu tous les hooks d'entrées asynchrones et composants asynchrones qui sont associés à la route initiale.
+
+ C'est utile pendant un rendu côté serveur pour assurer une sortie consistance sur le serveur et le client.
+
+ Le deuxième argument `errorCallback` est uniquement supporté à partir de la version 2.4. Il sera appelé lorsque la résolution de la route initiale résultera en une erreur (ex : la résolution d'un composant asynchrone qui a échouée).
+
+- **router.onError(callback)**
+
+ > 2.4.0+
+
+ 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 :
+
+ - L'erreur est lancée de manière synchrone à l'intérieur d'une fonction de sécurisation de route ;
+
+ - 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 ;
+
+ - Une erreur est survenue pendant la résolution d'un composant asynchrone qui est requis pour faire le rendu d'une route.
diff --git a/docs/fr/api/router-link.md b/docs/fr/api/router-link.md
new file mode 100644
index 000000000..74fe81872
--- /dev/null
+++ b/docs/fr/api/router-link.md
@@ -0,0 +1,142 @@
+# ``
+
+`` est le composant pour activer la navigation utilisateur dans une application où le routeur est activé. La localisation cible est spécifiée grâce à la prop `to`. Il est rendu en tant que balise `` avec le `href` correct par défaut, mais peut être configuré grâce à la prop `tag`. De plus, le lien se vera attribuer une classe CSS active lorsque la route cible est active.
+
+`` est préféré par rapport au `` en dur dans le code pour les raisons suivantes :
+
+- Cela fonctionne de la même manière qu'on soit dans le mode historique HTML5 ou le mode hash, donc si vous avez décidé de changer de mode, ou alors que le routeur se replie sur le mode hash pour IE9, rien n'a besoin d'être changé.
+
+- Dans le mode historique HTML5, `router-link` interceptera l'évènement du clic, comme ça le navigateur n'essaiera pas de rafraîchir la page.
+
+- En utilisant l'option `base` dans le mode historique HTML5, vous n'avez pas besoin de l'inclure dans les props `to` des URLs.
+
+### Props
+
+- **to**
+
+ - type : `string | Location`
+
+ - requis
+
+ Désigne la route cible du lien. Lorsqu'il est cliqué, la valeur de la prop `to` va être passée de manière interne à `router.push`, donc la valeur peut soit être une chaîne de caractères, ou alors un objet décrivant une localisation.
+
+ ``` html
+
+ Accueil
+
+ Accueil
+
+
+ Accueil
+
+
+ Accueil
+
+
+ Accueil
+
+
+ Utilisateur
+
+
+ S'enregistrer
+ ```
+
+
+- **replace**
+
+ - type : `boolean`
+
+ - défaut : `false`
+
+ Configurer la prop `replace` appellera `router.replace()` au lieu de `router.push()` lors du clic, comme ça, la navigation ne laissera pas un enregistrement dans l'historique.
+
+ ``` html
+
+ ```
+
+
+- **append**
+
+ - type : `boolean`
+
+ - défaut : `false`
+
+ Configurer la propriété `append` suffixe toujours le chemin relatif au chemin courant. Par exemple, assumons que nous naviguons de `/a` à un lien relatif `b`, sans `append` on finira sur `/b`, mais avec `append` on finira sur `/a/b`.
+
+ ``` html
+
+ ```
+
+
+- **tag**
+
+ - type : `string`
+
+ - défaut : `"a"`
+
+ Parfois, on veut que `` soit rendu avec une balise différente, ex : `
`. On peut alors utiliser la prop `tag` pour modifier la balise qui sera rendue, et elle écoutera toujours les évènements de clic pour la navigation
+
+ ``` html
+ foo
+
+
foo
+ ```
+
+
+- **active-class**
+
+ - type : `string`
+
+ - défaut : `"router-link-active"`
+
+ Configure la classe CSS active qui sera appliquée lorsque le lien sera actif. Notez que la valeur par défaut peut aussi être configurée de manière globale via l'option `linkActiveClass` du constructeur du routeur.
+
+- **exact**
+
+ - type : `boolean`
+
+ - défaut : `false`
+
+ Le comportement par défaut de la correspondance de classe active est une **correspondance inclusive**. Par exemple, `` vera cette classe appliquée tant que le chemin courant commencera par `/a/` ou `/a`.
+
+ Une conséquence de cela est que `` sera actif pour toutes les routes ! Pour forcer le lien dans un « mode correspondance exacte », utilisez la prop `exact`.
+
+ ``` html
+
+
+ ```
+
+ Allez voir les exemples expliquant la classe active pour les liens [ici](https://jsfiddle.net/8xrk1n9f/).
+
+- **event**
+
+ > 2.1.0+
+
+ - type : `string | Array`
+
+ - défaut : `'click'`
+
+ Spécifie les évènement(s) que peu(ven)t lancer la navigation de lien.
+
+- **exact-active-class**
+
+ > 2.5.0+
+
+ - type : `string`
+
+ - défaut : `"router-link-exact-active"`
+
+ Configure la classe CSS active qui sera appliquée lorsqu'un lien sera actif avec une correspondance exact. Notez que la valeur par défaut peut aussi être configurée de manière globale via l'option `linkExactActiveClass` du constructeur du routeur.
+
+### Appliquer la classe active à l'élément extérieur
+
+Parfois, on voudrait que la classe active soit appliquée à un élément extérieur au lieu de l'élément `` lui-même, dans ce cas, vous pouvez faire le rendu de cet élément extérieur en utilisant `` et en entourant le tag `` :
+
+``` html
+
+ /foo
+
+```
+
+Dans ce cas, `` sera le lien actuel (et récupérera le bon `href`), mais la classe active sera appliquée à l'élément extérieur `