Traduction de dynamic-matching.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

@@ -7,7 +7,7 @@
 - [Installation](installation.md)
 - Essentiel
   - [Pour commencer](essentials/getting-started.md)
-  - [Dynamic Route Matching (En)](essentials/dynamic-matching.md)
+  - [Concordance dynamique de route](essentials/dynamic-matching.md)
   - [Nested Routes (En)](essentials/nested-routes.md)
   - [Programmatic Navigation (En)](essentials/navigation.md)
   - [Named Routes (En)](essentials/named-routes.md)

docs/en/essentials/dynamic-matching.md

@@ -1,74 +1,74 @@
-# Dynamic Route Matching (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).*
+# Concordance dynamique de route
 
-Very often we will need to map routes with the given pattern to the same component. For example we may have a `User` component which should be rendered for all users but with different user IDs. In `vue-router` we can use a dynamic segment in the path to achieve that:
+Vous allez très souvent associer des routes avec un motif donné à un même composant. Par exemple nous pourrions avoir le composant `User` qui devrait être rendu pour tous les utilisateurs mais avec différents identifiants. Avec `vue-router` nous pouvons utiliser des segments dynamiques dans le chemin de la route pour réaliser cela :
 
 ``` js
 const User = {
-  template: '<div>User</div>'
+  template: '<div>Utilisateur</div>'
 }
 
 const router = new VueRouter({
   routes: [
-    // dynamic segments start with a colon
-    { path: '/user/:id', component: User }
+    // Les segments dynamiques commencent avec la ponctuation deux-points
+    { path: '/utilisateur/:id', component: User }
   ]
 })
 ```
 
-Now URLs like `/user/foo` and `/user/bar` will both map to the same route.
+Maintenant des URLs comme `/utilisateur/foo` et `/utilisateur/bar` seront chacune associée à la même route.
 
-A dynamic segment is denoted by a colon `:`. When a route is matched, the value of the dynamic segments will be exposed as `this.$route.params` in every component. Therefore, we can render the current user ID by updating `User`'s template to this:
+Un segment dynamique se repère avec les deux-points `:`. Quand une route concorde, la valeur du segment dynamique est exposée via `this.$route.params` dans tous les composants. Et donc, nous pouvons faire le rendu de l'identifiant de l'utilisateur courant en mettant à jour le template de `User` ainsi :
 
 ``` js
 const User = {
-  template: '<div>User {{ $route.params.id }}</div>'
+  template: '<div>Utilisateur {{ $route.params.id }}</div>'
 }
 ```
 
-You can checkout a live example [here](http://jsfiddle.net/yyx990803/4xfa2f19/).
+Vous pouvez regarder un exemple en ligne [ici](http://jsfiddle.net/yyx990803/4xfa2f19/).
 
-You can have multiple dynamic segments in the same route, and they will map to corresponding fields on `$route.params`. Examples:
+Vous pouvez avoir plusieurs segments dynamiques pour une même route, et ils seront associés aux champs associés dans `$route.params`. Des exemples :
 
-| pattern | matched path | $route.params |
+| motif | chemin concordant | $route.params |
 |---------|------|--------|
-| /user/:username | /user/evan | `{ username: 'evan' }` |
-| /user/:username/post/:post_id | /user/evan/post/123 | `{ username: 'evan', post_id: 123 }` |
+| /utilisateur/:username | /utilisateur/evan | `{ username: 'evan' }` |
+| /utilisateur/:username/billet/:post_id | /utilisateur/evan/billet/123 | `{ username: 'evan', post_id: 123 }` |
 
-In addition to `$route.params`, the `$route` object also exposes other useful information such as `$route.query` (if there is a query in the URL), `$route.hash`, etc. You can check out the full details in the [API Reference](../api/route-object.md).
+En plus de `$route.params`, l'objet `$route` expose également d'autres informations utiles comme la `$route.query` (s'il y a une requête dans l'URL), `$route.hash`, etc. Vous pouvez accéder à tous les détails de cela dans la [référence de l'API](../api/route-object.md).
 
-### Reacting to Params Changes
+### Réactivité au changement de paramètres
 
-One thing to note when using routes with params is that when the user navigates from `/user/foo` to `/user/bar`, **the same component instance will be reused**. Since both routes render the same component, this is more efficient than destroying the old instance and then creating a new one. **However, this also means that the lifecycle hooks of the component will not be called**.
+Une chose à noter quand vous utilisez des routes avec des paramètres (segments), c'est que lors de la navigation de l'utilisateur de `/utilisateur/foo` vers `/utilisateur/bar`, **la même instance de composant va être réutilisée**. Puisque les deux routes font le rendu du même composant, cela est plus performant que de détruire l'ancienne instance et dans créer une nouvelle. **Cependant, cela signifie également que les hooks de cycle de vie ne seront pas appelés**.
 
-To react to params changes in the same component, you can simply watch the `$route` object:
+Pour réagir aux changements de paramètres dans le même composant, vous pouvez simplement observer l'objet `$route` :
 
 ``` js
 const User = {
   template: '...',
   watch: {
     '$route' (to, from) {
-      // react to route changes...
+      // réagir au changement de route...
     }
   }
 }
 ```
 
-Or, use the `beforeRouteUpdate` guard introduced in 2.2:
+Ou utiliser la fonction de sécurisation `beforeRouteUpdate` introduite avec la 2.2 :
 
 ``` js
 const User = {
   template: '...',
   beforeRouteUpdate (to, from, next) {
-    // react to route changes...
-    // don't forget to call next()
+    // réagir au changement de route...
+    // n'oubliez pas d'appeler `next()`
   }
 }
 ```
 
-### Advanced Matching Patterns
+### Motifs de concordance avancés
 
-`vue-router` uses [path-to-regexp](https://github.com/pillarjs/path-to-regexp) as its path matching engine, so it supports many advanced matching patterns such as optional dynamic segments, zero or more / one or more requirements, and even custom regex patterns. Check out its [documentation](https://github.com/pillarjs/path-to-regexp#parameters) for these advanced patterns, and [this example](https://github.com/vuejs/vue-router/blob/dev/examples/route-matching/app.js) of using them in `vue-router`.
+`vue-router` utilise [path-to-regexp](https://github.com/pillarjs/path-to-regexp) comme moteur de concordance de chemin, il supporte donc plusieurs motifs de concordance avancés tel que la présence optionnelle de segments dynamiques, aucun ou plusieurs motifs, plus d'options par motifs, et même des motifs d'expressions régulières personnalisés. Consultez cette [documentation](https://github.com/pillarjs/path-to-regexp#parameters) pour utiliser ces motifs avancés et [cet exemple](https://github.com/vuejs/vue-router/blob/dev/examples/route-matching/app.js) pour les utiliser avec `vue-router`.
 
-### Matching Priority
+### Priorité de concordance
 
-Sometimes the same URL may be matched by multiple routes. In such a case the matching priority is determined by the order of route definition: the earlier a route is defined, the higher priority it gets.
+Parfois la même URL peut être adressée par de multiples routes. Dans ce cas, la priorité de concordance est déterminée par l'ordre de la définition des routes : plus la route est définie tôt, plus sa priorité est élevée.

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.

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()!
+  }
+})
+```