From d89ad6b30fd0ada048d3f829ed1b2dac3b79864e Mon Sep 17 00:00:00 2001 From: Bruno Lesieur Date: Thu, 13 Jul 2017 13:50:38 +0200 Subject: [PATCH 1/5] Traduction de `history-mode.md` Signed-off-by: Bruno Lesieur --- docs/en/SUMMARY.md | 2 +- docs/en/essentials/history-mode.md | 56 ++++++++++++++++++++++-------- 2 files changed, 42 insertions(+), 16 deletions(-) diff --git a/docs/en/SUMMARY.md b/docs/en/SUMMARY.md index ef7def6a4..4fe98b786 100644 --- a/docs/en/SUMMARY.md +++ b/docs/en/SUMMARY.md @@ -14,7 +14,7 @@ - [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) + - [Mode historique de HTML5](essentials/history-mode.md) - Avancé - [Navigation Guards (En)](advanced/navigation-guards.md) - [Route Meta Fields (En)](advanced/meta.md) diff --git a/docs/en/essentials/history-mode.md b/docs/en/essentials/history-mode.md index e6570d3c8..b2c0b2a7e 100644 --- a/docs/en/essentials/history-mode.md +++ b/docs/en/essentials/history-mode.md @@ -1,8 +1,8 @@ -# HTML5 History Mode (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).* +# 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 hashe_. 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 prendre en main le **mode historique** qui va utiliser l'API `history.pushState` pour réaliser de la navigation d'URL sans recharger la 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 ici. Si votre application est une application monopage cliente, sans une configuration serveur adaptée, les utilisateurs tomberons sur une page d'erreur 404 en tantant 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é ne concorde avec aucun fichier statique, alors il doit toujours renvoyer la page `index.html` où votre application doit se lancer. De nouveau magnifique ! -## Example Server Configurations +## Exemple de configurations serveur #### Apache @@ -40,11 +40,36 @@ 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 +var http = require("http"), + fs = require("fs"), + httpPort = 80; + +http.createServer(function (req, res) { + fs.readFile("index.htm", "utf-8", function (err, content) { + if (err) { + console.log('We cannot open "index.htm" view file.'); + } + + 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 / Express, vous pouvez utiliser le [middleware connect-history-api-fallback](https://github.com/bripkens/connect-history-api-fallback). #### Internet Information Services (IIS) + ```xml @@ -61,10 +86,10 @@ For Node.js/Express, consider using [connect-history-api-fallback middleware](ht - - + + - + @@ -73,6 +98,7 @@ For Node.js/Express, consider using [connect-history-api-fallback middleware](ht ``` #### Caddy + ``` rewrite { regexp .* @@ -80,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 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({ @@ -93,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 arternative possible, si vous utilisez un serveur Node.js, est d'implémenter ce mécansisme de substitution en utilisant le routeur côté serveur pour vérifier la concordance des demande d'URL entrante qui correspondrait à une route inexistante. Consultez l'[utilisation de Vue côté serveur](https://ssr.vuejs.org/en/) pour plus d'informations. From 4b30b2acdcedfa2d303b6b08974f813d4b3cbd96 Mon Sep 17 00:00:00 2001 From: Bruno Lesieur Date: Thu, 13 Jul 2017 14:02:55 +0200 Subject: [PATCH 2/5] Relecture. Signed-off-by: Bruno Lesieur --- docs/en/essentials/history-mode.md | 18 +++++++----------- 1 file changed, 7 insertions(+), 11 deletions(-) diff --git a/docs/en/essentials/history-mode.md b/docs/en/essentials/history-mode.md index 4c840b884..50c162d85 100644 --- a/docs/en/essentials/history-mode.md +++ b/docs/en/essentials/history-mode.md @@ -1,6 +1,6 @@ # Mode historique de HTML5 -Le mode par défaut de `vue-router` est le _mode hashe_. 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. +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. Pour se passer du hash, nous pouvons prendre en main le **mode historique** qui va utiliser l'API `history.pushState` pour réaliser de la navigation d'URL sans recharger la page : @@ -11,15 +11,11 @@ const router = new VueRouter({ }) ``` -Quand vous utilisez le mode historique l'URL ressemblera a n'importe quelle URL normale. Par ex. `http://oursite.com/user/id`. Magnifique ! +Quand vous utilisez le mode historique, l'URL ressemblera a n'importe quelle URL normale. Par ex. `http://oursite.com/user/id`. Magnifique ! -Cependant, un problème apparaît ici. Si votre application est une application monopage cliente, sans une configuration serveur adaptée, les utilisateurs tomberons sur une page d'erreur 404 en tantant d'accéder à `http://oursite.com/user/id` directement dans leur navigateur. Maintenant ça craint. +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. -<<<<<<< HEAD -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é ne concorde avec aucun fichier statique, alors il doit toujours renvoyer la page `index.html` où votre application doit se lancer. De nouveau magnifique ! -======= -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! ->>>>>>> working +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 ! ## Exemple de configurations serveur @@ -70,7 +66,7 @@ http.createServer(function (req, res) { #### Node.js avec Express -Pour Node.js / Express, vous pouvez utiliser le [middleware connect-history-api-fallback](https://github.com/bripkens/connect-history-api-fallback). +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) @@ -112,7 +108,7 @@ rewrite { ## Limitation -Il y a une limitation a 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 : +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({ @@ -123,4 +119,4 @@ const router = new VueRouter({ }) ``` -Une arternative possible, si vous utilisez un serveur Node.js, est d'implémenter ce mécansisme de substitution en utilisant le routeur côté serveur pour vérifier la concordance des demande d'URL entrante qui correspondrait à une route inexistante. Consultez l'[utilisation de Vue côté serveur](https://ssr.vuejs.org/en/) pour plus d'informations. +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/en/) pour plus d'informations. From 8e403e531826e972ecb3dabd2a87d148f3a1c8f5 Mon Sep 17 00:00:00 2001 From: Bruno Lesieur Date: Thu, 13 Jul 2017 14:22:49 +0200 Subject: [PATCH 3/5] Translate code example from `history-mode.md` Signed-off-by: Bruno Lesieur --- docs/en/essentials/history-mode.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/en/essentials/history-mode.md b/docs/en/essentials/history-mode.md index 50c162d85..9ad547ac6 100644 --- a/docs/en/essentials/history-mode.md +++ b/docs/en/essentials/history-mode.md @@ -50,7 +50,7 @@ var http = require("http"), http.createServer(function (req, res) { fs.readFile("index.htm", "utf-8", function (err, content) { if (err) { - console.log('We cannot open "index.htm" view file.'); + console.log('Impossible d'ouvrir le fichie "index.htm".'); } res.writeHead(200, { @@ -119,4 +119,4 @@ const router = new VueRouter({ }) ``` -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/en/) pour plus d'informations. +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. From 5c3925567cb86b7b825cc7fb42ac7d08ddd4ca42 Mon Sep 17 00:00:00 2001 From: Bruno Lesieur Date: Thu, 13 Jul 2017 14:29:14 +0200 Subject: [PATCH 4/5] Follow Vue conventions Signed-off-by: Bruno Lesieur --- docs/en/essentials/history-mode.md | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/docs/en/essentials/history-mode.md b/docs/en/essentials/history-mode.md index 9ad547ac6..9cb6d6384 100644 --- a/docs/en/essentials/history-mode.md +++ b/docs/en/essentials/history-mode.md @@ -43,25 +43,25 @@ location / { #### Node.js natif ```js -var http = require("http"), - fs = require("fs"), - httpPort = 80; +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 fichie "index.htm".'); + console.log('Impossible d'ouvrir le fichie "index.htm".') } res.writeHead(200, { "Content-Type": "text/html; charset=utf-8" - }); + }) - res.end(content); - }); + res.end(content) + }) }).listen(httpPort, function () { - console.log("Server listening on: http://localhost:%s", httpPort); -}); + console.log("Server listening on: http://localhost:%s", httpPort) +}) ``` #### Node.js avec Express From c6705a3589e2e797f54299a5e86ce8daa870ffde Mon Sep 17 00:00:00 2001 From: Bruno Lesieur Date: Sat, 15 Jul 2017 16:32:48 +0200 Subject: [PATCH 5/5] Review de @Kocal Signed-off-by: Bruno Lesieur --- docs/en/essentials/history-mode.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/en/essentials/history-mode.md b/docs/en/essentials/history-mode.md index 9cb6d6384..63f376c5d 100644 --- a/docs/en/essentials/history-mode.md +++ b/docs/en/essentials/history-mode.md @@ -2,7 +2,7 @@ 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. -Pour se passer du hash, nous pouvons prendre en main le **mode historique** qui va utiliser l'API `history.pushState` pour réaliser de la navigation d'URL sans recharger la page : +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({ @@ -50,7 +50,7 @@ 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 fichie "index.htm".') + console.log('Impossible d\'ouvrir le fichier "index.htm"') } res.writeHead(200, {