Merge branch 'working' into navigation-guards

Author: MachinisteWeb

docs/en/SUMMARY.md

@@ -13,11 +13,11 @@
   - [Routes nommées](essentials/named-routes.md)
   - [Vues nommées](essentials/named-views.md)
   - [Redirection et alias](essentials/redirect-and-alias.md)
-  - [Passing Props to Route Components (En)](essentials/passing-props.md)
-  - [HTML5 History Mode (En)](essentials/history-mode.md)
+  - [Passage de props aux composants de route](essentials/passing-props.md)
+  - [Mode historique de HTML5](essentials/history-mode.md)
 - Avancé
   - [Intercepteurs de navigation](advanced/navigation-guards.md)
-  - [Route Meta Fields (En)](advanced/meta.md)
+  - [Champs meta de route](advanced/meta.md)
   - [Transitions (En)](advanced/transitions.md)
   - [Récupération de données](advanced/data-fetching.md)
   - [Comportement du défilement](advanced/scroll-behavior.md)

docs/en/advanced/meta.md

@@ -1,6 +1,6 @@
-# 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).*
+# Champs meta de route
 
-You can include a `meta` field when defining a route:
+Vous pouvez inclure un champ `meta` quand vous définissez une route :
 
 ``` js
 const router = new VueRouter({
@@ -12,7 +12,7 @@ const router = new VueRouter({
         {
           path: 'bar',
           component: Bar,
-          // a meta field
+          // un champ `meta`
           meta: { requiresAuth: true }
         }
       ]
@@ -21,21 +21,21 @@ const router = new VueRouter({
 })
 ```
 
-So how do we access this `meta` field?
+Comment maintenant accéder à ce champ `meta` ?
 
-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.
+Tout d'abord, chaque objet route dans la configuration de `routes` est appelé un **registre de route**. Les registres de route peuvent être imbriqués. Par conséquent, quand une route concorde, elle peut potentiellement concorder avec plus d'un registre de route.
 
-For example, with the above route config, the URL `/foo/bar` will match both the parent route record and the child route record.
+Par exemple, avec la configuration de route ci-dessous, l'URL `/foo/bar` va concorder avec le registre parent et le registre enfant.
 
-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.
+Tous les registres concordant avec une route sont exposés dans l'objet `$route` (ainsi que les objets de route dans les sécurisations de navigation) dans le tableau `$route.matched`. Donc, nous devons itérer à travers `$route.matched` pour vérifier les champs meta dans les registres de route.
 
-An example use case is checking for a meta field in the global navigation guard:
+Un exemple concret est la vérification d'un champ meta dans une interception de navigation globale :
 
 ``` 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.
+    // cette route demande une autorisation, vérifions si l'utilisateur est logué.
+    // sinon, redirigeons le sur la page de login.
     if (!auth.loggedIn()) {
       next({
         path: '/login',
@@ -45,7 +45,7 @@ router.beforeEach((to, from, next) => {
       next()
     }
   } else {
-    next() // make sure to always call next()!
+    next() // assurez vous de toujours appeler `next()` !
   }
 })
 ```

docs/en/essentials/history-mode.md

@@ -1,8 +1,8 @@
-# HTML5 History Mode (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).*
+# Mode historique de HTML5
 
-The default mode for `vue-router` is _hash mode_ - it uses the URL hash to simulate a full URL so that the page won't be reloaded when the URL changes.
+Le mode par défaut de `vue-router` est le _mode hash_. Il utilise la partie hash de l'URL pour simuler une URL complète et ainsi ne pas recharger la page quand l'URL change.
 
-To get rid of the hash, we can use the router's **history mode**, which leverages the `history.pushState` API to achieve URL navigation without a page reload:
+Pour se passer du hash, nous pouvons utiliser le **mode historique** qui utilisera l'API `history.pushState` afin de permettre une navigation sans rechargement de page :
 
 ``` js
 const router = new VueRouter({
@@ -11,13 +11,13 @@ const router = new VueRouter({
 })
 ```
 
-When using history mode, the URL will look "normal," e.g. `http://oursite.com/user/id`. Beautiful!
+Quand vous utilisez le mode historique, l'URL ressemblera a n'importe quelle URL normale. Par ex. `http://oursite.com/user/id`. Magnifique !
 
-Here comes a problem, though: Since our app is a single page client side app, without a proper server configuration, the users will get a 404 error if they access `http://oursite.com/user/id` directly in their browser. Now that's ugly.
+Cependant, un problème apparaît si votre application est une application monopage cliente. Sans une configuration serveur adaptée, les utilisateurs tomberons sur une page d'erreur 404 en tentant d'accéder à `http://oursite.com/user/id` directement dans leur navigateur. Maintenant ça craint.
 
-Not to worry: To fix the issue, all you need to do is add a simple catch-all fallback route to your server. If the URL doesn't match any static assets, it should serve the same `index.html` page that your app lives in. Beautiful, again!
+Ne vous inquiétez pas. Pour résoudre ce problème, il vous suffit d'ajouter une route à votre serveur prenant en compte toutes les adresses demandées. Si l'URL demandée ne concorde avec aucun fichier statique, alors il doit toujours renvoyer la page `index.html` qui contient le code de votre application. De nouveau magnifique !
 
-## Example Server Configurations
+## Exemple de configurations serveur
 
 #### Apache
 
@@ -40,9 +40,33 @@ location / {
 }
 ```
 
-#### Node.js (Express)
+#### Node.js natif
 
-For Node.js/Express, consider using [connect-history-api-fallback middleware](https://github.com/bripkens/connect-history-api-fallback).
+```js
+const http = require("http")
+const fs = require("fs")
+const httpPort = 80
+
+http.createServer(function (req, res) {
+  fs.readFile("index.htm", "utf-8", function (err, content) {
+    if (err) {
+      console.log('Impossible d\'ouvrir le fichier "index.htm"')
+    }
+
+    res.writeHead(200, {
+      "Content-Type": "text/html; charset=utf-8"
+    })
+
+    res.end(content)
+  })
+}).listen(httpPort, function () {
+  console.log("Server listening on: http://localhost:%s", httpPort)
+})
+```
+
+#### Node.js avec Express
+
+Pour Node.js avec Express, vous pouvez utiliser le [middleware connect-history-api-fallback](https://github.com/bripkens/connect-history-api-fallback).
 
 #### Internet Information Services (IIS)
 
@@ -82,9 +106,9 @@ rewrite {
 }
 ```
 
-## Caveat
+## Limitation
 
-There is a caveat to this: Your server will no longer report 404 errors as all not-found paths now serve up your `index.html` file. To get around the issue, you should implement a catch-all route within your Vue app to show a 404 page:
+Il y a une limitation a tout ceci. Votre serveur ne renverra plus les erreurs 404 des chemins qui ne sont pas trouvés puisqu'il va servir à présent le fichier `index.html`. Pour contourner ce problème, vous pouvez implémenter une route concordant avec toutes les adresses en 404 dans votre application Vue :
 
 ``` js
 const router = new VueRouter({
@@ -95,4 +119,4 @@ const router = new VueRouter({
 })
 ```
 
-Alternatively, if you are using a Node.js server, you can implement the fallback by using the router on the server side to match the incoming URL and respond with 404 if no route is matched.
+Une alternative possible, si vous utilisez un serveur Node.js, est d'implémenter ce mécanisme de substitution en utilisant le routeur côté serveur pour vérifier la concordance des demande d'URL entrante. Si la route ne concorde avec rien, la page est inexistante. Consultez l'[utilisation de Vue côté serveur](https://ssr.vuejs.org/fr/) pour plus d'informations.

docs/en/essentials/passing-props.md

@@ -1,53 +1,52 @@
-# Passing Props to Route Components (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).*
+# Passage de props aux composants de route
 
-Using `$route` in your component creates a tight coupling with the route which limits the flexibility of the component as it can only be used on certain urls.
+Utiliser `$route` dans vos composants crée un couplage fort à la route qui va limiter la flexibilité du composant qui ne pourra être utilisé que par certaines URLs.
 
-To decouple this component from the router use props:
+Pour découpler un composant de son routeur, utilisez les props :
 
-**❌ Coupled to $route**
+**❌ Couplé avec `$route`**
 
 ``` 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 }
   ]
 })
 ```
 
-**👍 Decoupled with props**
+**👍 Découplé avec les props**
 
 ``` js
 const User = {
   props: ['id'],
-  template: '<div>User {{ id }}</div>'
+  template: '<div>Utilisateur {{ id }}</div>'
 }
 const router = new VueRouter({
   routes: [
-    { path: '/user/:id', component: User, props: true }
+    { path: '/utilisateur/:id', component: User, props: true }
 
-    // for routes with named views, you have to define the props option for each named view:
+    // pour les routes avec vues nommées, vous devez définir l'option `props` pour chaque vue nommée :
     {
-      path: '/user/:id',
+      path: '/utilisateur/:id',
       components: { default: User, sidebar: Sidebar },
       props: { default: true, sidebar: false }
     }
   ]
 })
 ```
 
-This allows you to use the component anywhere, which makes the component easier to reuse and test.
+Cela vous permet d'utiliser le composant n'importe où, ce qui le rend plus facile à réutiliser et à tester.
 
-### Boolean mode
+### Mode booléen
 
-When props is set to true, the route.params will be set as the component props.
+Quand `props` est mis à `true`, le `route.params` est remplis en tant que props du composant.
 
-### Object mode
+### Mode objet
 
-When props is an object, this will be set as the component props as-is.
-Useful for when the props are static.
+Quand `props` est un objet, cela alimente les props de celui-ci. Utile quand les props sont statiques.
 
 ``` js
 const router = new VueRouter({
@@ -57,9 +56,9 @@ const router = new VueRouter({
 })
 ```
 
-### Function mode
+### Mode fonction
 
-You can create a function that returns props. This allows you to cast the parameter to another type, combine static values with route-based values, etc.
+Vous pouvez créer une fonction qui va retourner les props. Cela vous permet de coercer un paramètre dans un autre type, de combiner les valeurs statiques avec les valeurs des routes, etc.
 
 ``` js
 const router = new VueRouter({
@@ -69,8 +68,8 @@ const router = new VueRouter({
 })
 ```
 
-The url: `/search?q=vue` would pass `{query: "vue"}` as props to the SearchUser component.
+L'URL `/search?q=vue` passerait `{query: 'vue'}` comme `props` au composant `SearchUser`.
 
-Try to keep the props function stateless, as it's only evaluated on route changes. Use a wrapper component if you need state to define the props, that way vue can react to state changes.
+Essayez de garder la fonction de `props` sans état, car il n'est évalué que sur les changements de route. Utilisez un composant englobant si vous avez besoin d'état pour définir les props, ainsi la vue pourra réagir au changement d'état.
 
-For advanced usage, checkout the [example](https://github.com/vuejs/vue-router/blob/dev/examples/route-props/app.js).
+Pour une utilisation avancée, jettez un œil à cet [exemple](https://github.com/vuejs/vue-router/blob/dev/examples/route-props/app.js).