Skip to content

Commit 2905b28

Browse files
Merge pull request #21 from vuejs-fr/history-mode
Traduction de `history-mode.md`
2 parents dcbf4be + c6705a3 commit 2905b28

File tree

2 files changed

+37
-13
lines changed

2 files changed

+37
-13
lines changed

docs/en/SUMMARY.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
- [Vues nommées](essentials/named-views.md)
1515
- [Redirection et alias](essentials/redirect-and-alias.md)
1616
- [Passing Props to Route Components (En)](essentials/passing-props.md)
17-
- [HTML5 History Mode (En)](essentials/history-mode.md)
17+
- [Mode historique de HTML5](essentials/history-mode.md)
1818
- Avancé
1919
- [Navigation Guards (En)](advanced/navigation-guards.md)
2020
- [Route Meta Fields (En)](advanced/meta.md)

docs/en/essentials/history-mode.md

+36-12
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
# 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).*
1+
# Mode historique de HTML5
22

3-
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.
3+
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.
44

5-
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:
5+
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 :
66

77
``` js
88
const router = new VueRouter({
@@ -11,13 +11,13 @@ const router = new VueRouter({
1111
})
1212
```
1313

14-
When using history mode, the URL will look "normal," e.g. `http://oursite.com/user/id`. Beautiful!
14+
Quand vous utilisez le mode historique, l'URL ressemblera a n'importe quelle URL normale. Par ex. `http://oursite.com/user/id`. Magnifique !
1515

16-
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.
16+
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.
1717

18-
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!
18+
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 !
1919

20-
## Example Server Configurations
20+
## Exemple de configurations serveur
2121

2222
#### Apache
2323

@@ -40,9 +40,33 @@ location / {
4040
}
4141
```
4242

43-
#### Node.js (Express)
43+
#### Node.js natif
4444

45-
For Node.js/Express, consider using [connect-history-api-fallback middleware](https://github.com/bripkens/connect-history-api-fallback).
45+
```js
46+
const http = require("http")
47+
const fs = require("fs")
48+
const httpPort = 80
49+
50+
http.createServer(function (req, res) {
51+
fs.readFile("index.htm", "utf-8", function (err, content) {
52+
if (err) {
53+
console.log('Impossible d\'ouvrir le fichier "index.htm"')
54+
}
55+
56+
res.writeHead(200, {
57+
"Content-Type": "text/html; charset=utf-8"
58+
})
59+
60+
res.end(content)
61+
})
62+
}).listen(httpPort, function () {
63+
console.log("Server listening on: http://localhost:%s", httpPort)
64+
})
65+
```
66+
67+
#### Node.js avec Express
68+
69+
Pour Node.js avec Express, vous pouvez utiliser le [middleware connect-history-api-fallback](https://github.com/bripkens/connect-history-api-fallback).
4670

4771
#### Internet Information Services (IIS)
4872

@@ -82,9 +106,9 @@ rewrite {
82106
}
83107
```
84108

85-
## Caveat
109+
## Limitation
86110

87-
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:
111+
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 :
88112

89113
``` js
90114
const router = new VueRouter({
@@ -95,4 +119,4 @@ const router = new VueRouter({
95119
})
96120
```
97121

98-
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.
122+
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.

0 commit comments

Comments
 (0)