Traduction de nested-routes.md

.babelrc

@@ -1,4 +1,4 @@
 {
-  "presets": ["es2015-loose", "flow-vue"],
+  "presets": ["es2015", "flow-vue"],
   "plugins": ["syntax-dynamic-import"]
 }

build/build.js

@@ -92,9 +92,7 @@ function buildEntry (config) {
     const code = bundle.generate(config).code
     if (isProd) {
       var minified = (config.banner ? config.banner + '\n' : '') + uglify.minify(code, {
-        fromString: true,
         output: {
-          screw_ie8: true,
           ascii_only: true
         },
         compress: {

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/en/SUMMARY.md

@@ -8,7 +8,7 @@
 - Essentiel
   - [Pour commencer](essentials/getting-started.md)
   - [Dynamic Route Matching (En)](essentials/dynamic-matching.md)
-  - [Nested Routes (En)](essentials/nested-routes.md)
+  - [Routes imbriquées](essentials/nested-routes.md)
   - [Programmatic Navigation (En)](essentials/navigation.md)
   - [Named Routes (En)](essentials/named-routes.md)
   - [Named Views (En)](essentials/named-views.md)

docs/en/essentials/nested-routes.md

@@ -1,21 +1,21 @@
-# Nested Routes (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).*
+# 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
 <div id="app">
@@ -25,46 +25,45 @@ Given the app we created in the last chapter:
 
 ``` js
 const User = {
-  template: '<div>User {{ $route.params.id }}</div>'
+  template: '<div>Utilisateur {{ $route.params.id }}</div>'
 }
 
 const router = new VueRouter({
   routes: [
-    { path: '/user/:id', component: User }
+    { path: '/utilisateur/:id', component: User }
   ]
 })
 ```
 
-The `<router-view>` 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 `<router-view>`. For example, if we add one inside the `User` component's template:
+Ici le `<router-view>` 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 `<router-view>` imbriquée. Par exemple, ajoutons en une à l'intérieur du template du composant `User` :
 
 ``` js
 const User = {
   template: `
     <div class="user">
-      <h2>User {{ $route.params.id }}</h2>
+      <h2>Utilisateur {{ $route.params.id }}</h2>
       <router-view></router-view>
     </div>
   `
 }
 ```
 
-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 <router-view>
-          // when /user/:id/profile is matched
+          // `UserProfile` va être rendu à l'intérieur du `<router-view>` de `User`
+          // quand `/utilisateur/:id/profil` concorde
           path: 'profile',
           component: UserProfile
         },
         {
-          // UserPosts will be rendered inside User's <router-view>
-          // when /user/:id/posts is matched
+          // `UserPosts` va être rendu à l'intérieur du `<router-view>` 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 <router-view>
-        // when /user/:id is matched
+        // `UserProfile` va être rendu à l'intérieur du `<router-view>` 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/).

docs/fr/README.md

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

docs/fr/SUMMARY.md

@@ -0,0 +1,32 @@
+# vue-router 2
+<!--email_off-->
+> Note: [email protected] 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,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.