First fr translation part.

Signed-off-by: Bruno Lesieur <bruno.lesieur@gmail.com>

Author: MachinisteWeb

docs/LANGS.md

@@ -1,4 +1,5 @@
 * [2.0 - English](en/)
+* [2.0 - French](fr/)
 * [2.0 - Japanese](ja/)
 * [2.0 - 中文](zh-cn/)
 * [2.0 - German](de/)

docs/fr/README.md

@@ -0,0 +1 @@
+{% include "./SUMMARY.md" %}

docs/fr/SUMMARY.md

@@ -0,0 +1,32 @@
+# vue-router 2
+<!--email_off-->
+> 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).
+<!--/email_off-->
+**[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)

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
+<template>
+  <div class="post">
+    <div class="loading" v-if="loading">
+      Chargement...
+    </div>
+
+    <div v-if="error" class="error">
+      {{ error }}
+    </div>
+
+    <div v-if="post" class="content">
+      <h2>{{ post.title }}</h2>
+      <p>{{ post.body }}</p>
+    </div>
+  </div>
+</template>
+```
+
+``` 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.

docs/fr/advanced/lazy-loading.md

@@ -0,0 +1,44 @@
+# Le chargement à la volée
+
+Pendant la construction d'applications avec un empaqueteur (« bundler »), le paquet 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-require/) de webpack, il est très facile de charger à la volée les composants de route. 
+ 
+Tout ce que nous avons à faire, c'est de définir les composants de notre route en tant que composants asynchrones :
+
+``` js
+const Foo = resolve => {
+  // `require.ensure` est une syntaxe spéciale de webpack pour une séparation de code.
+  require.ensure(['./Foo.vue'], () => {
+    resolve(require('./Foo.vue'))
+  })
+}
+```
+
+Il y a aussi une alternative à la syntaxe de séparation de code utilisant l'inclusion à la sauce AMD, cela peut être simplifié en :
+
+``` js
+const Foo = resolve => require(['./Foo.vue'], resolve)
+```
+
+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-require/#chunkname) en donnant un nom au fragment en 3ème argument de `require.ensure`.
+
+``` js
+const Foo = r => require.ensure([], () => r(require('./Foo.vue')), 'group-foo')
+const Bar = r => require.ensure([], () => r(require('./Bar.vue')), 'group-foo')
+const Baz = r => require.ensure([], () => r(require('./Baz.vue')), 'group-foo')
+```
+
+webpack groupera tous les modules asynchrones avec le même nom de fragment, dans le même fragment asynchrone. Cela signifie aussi que nous n'avons plus besoin de lister explicitement les dépendances pour `require.ensure` (équivaut à passer un tableau vide).

docs/fr/advanced/meta.md

@@ -0,0 +1,51 @@
+# Route Meta Fields (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).*
+
+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()!
+  }
+})
+```

docs/fr/advanced/navigation-guards.md

@@ -0,0 +1,134 @@
+# Navigation Guards (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).*
+
+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.