forked from vuejs/vue-router
-
Notifications
You must be signed in to change notification settings - Fork 2
Traduction de history-mode.md
#21
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Merged
Merged
Changes from 5 commits
Commits
Show all changes
6 commits
Select commit
Hold shift + click to select a range
d89ad6b
Traduction de `history-mode.md`
MachinisteWeb 5cdbe58
Merge branch 'working' into history-mode
MachinisteWeb 4b30b2a
Relecture.
MachinisteWeb 8e403e5
Translate code example from `history-mode.md`
MachinisteWeb 5c39255
Follow Vue conventions
MachinisteWeb c6705a3
Review de @Kocal
MachinisteWeb File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 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 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. | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
(Non en vrai ne change rien) |
||
|
||
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 fichie "index.htm".') | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
|
||
} | ||
|
||
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. |
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.