Skip to content

[Doc FR]: Update with 2.5 version! #1840

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 10 commits into from
Oct 22, 2017
6 changes: 3 additions & 3 deletions docs/fr/SUMMARY.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
# vue-router 2
<!--email_off-->
> Note: vue-router@2.x 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-->

> Note aux utilisateurs de TypeScript : vue-router@3.0+ nécessite [email protected]+, et inverssement.

**[Notes de version](https://github.com/vuejs/vue-router/releases)**

- [Installation](installation.md)
Expand Down
25 changes: 23 additions & 2 deletions docs/fr/advanced/navigation-guards.md
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ Chaque fonction d'interception reçoit trois arguments :

- **`next(false)`**: annuler la navigation courante. Si l'URL du navigateur avait changé (manuellement par l'utilisateur ou via le bouton retour du navigateur), il sera remis à sa valeur de route de `from`.

- **`next('/')` ou `next({ path: '/' })`**: redirige vers le nouvel URL. La navigation courante va être arrêtée et une nouvelle va se lancer.
- **`next('/')` ou `next({ path: '/' })`**: redirige vers le nouvel URL. La navigation courante va être arrêtée et une nouvelle va se lancer. Vous pouvez passer n'importe quel objet à `next`, vous permettant ainsi de spécifier des options comme `replace: true`, `name: 'home'` et n'importe quelles options dans [la prop `to` du `router-link`](../api/router-link.md) ou [`router.push`](../api/router-instance#méthodes).

- **`next(error)`**: (2.4.0+) si l'argument passé à `next` est une instance de `Error`, la navigation va s'arrêter et l'erreur sera passée aux fonctions de rappel via `router.onError()`.

Expand Down Expand Up @@ -116,7 +116,28 @@ beforeRouteEnter (to, from, next) {
}
```

Vous pouvez directement accéder à `this` à l'intérieur de `beforeRouteLeave`. L'interception de sortie est utilisée pour empêcher l'utilisateur de quitter la route par accident alors qu'il n'a pas sauvé ses modifications. La navigation peut être annulée en appelant `next(false)`.
Notez que `beforeRouteEnter` est la seule interception qui supporte une fonction de rappelle dans `next`. Pour `beforeRouteUpdate` et `beforeRouteLeave`, `this` est déjà disponible. Le passage d'une fonction de rappel n'étant pas nécessaire, il n'est donc pas *supporté* :

```js
beforeRouteUpdate (to, from, next) {
// utiliser juste `this`
this.name = to.params.name
next()
}
```

L'**interception de sortie** est habituellement utilisée pour empécher l'utilisateur de quitter la route sans avoir sauvegardé ses changements. La navigation peut être annulée en appelant `next(false)`.

```js
beforeRouteLeave (to, from , next) {
const answer = window.confirm('Voulez-vous vraiment quitter cette page ? Vos changements seront perdus.')
if (answer) {
next()
} else {
next(false)
}
}
```

### Le flux de résolution de navigation complet

Expand Down
20 changes: 19 additions & 1 deletion docs/fr/advanced/scroll-behavior.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

En utilisant le routage côté client, nous pourrions vouloir faire défiler la page jusqu'en haut lorsqu'on navigue vers une nouvelle route, ou alors préserver la position du défilement des entrées de l'historique comme le ferait une page réelle. `vue-router` vous permet de faire cela et, encore mieux, vous permet de changer le comportement du défilement pendant la navigation.

**Note : cette fonctionnalité ne fonctionne qu'avec le mode historique HTML5.**
**Note : cette fonctionnalité ne fonctionne que si le navigateur supporte `history.pushState`.**

Pendant la création de l'instance du routeur, vous pouvez renseigner la fonction `scrollBehavior` :

Expand Down Expand Up @@ -60,3 +60,21 @@ scrollBehavior (to, from, savedPosition) {
```

On peut aussi utiliser les [champs meta de route](meta.md) pour implémenter un contrôle bien précis pour le comportement du défilement. Allez voir un exemple complet [ici](https://github.com/vuejs/vue-router/blob/dev/examples/scroll-behavior/app.js).

### Défilement asynchrone

> Nouveau dans la 2.8.0+

Vous pouvez également retourner une promesse pour résoudre la description de position souhaitée :

``` js
scrollBehavior (to, from, savedPosition) {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve({ x: 0, y: 0 })
}, 500)
})
}
```

Il est possible de relier les événements d'un composant de transition au niveau de la page pour que le comportement de défilement soit bien adapté à vos transitions de pages. Cependant, en raison de la variance et de la complexité des cas d'utilisation, nous fournissons simplement ce code primitif pour permettre aux utilisateurs de faire les implémentations spécifiques.
9 changes: 7 additions & 2 deletions docs/fr/api/options.md
Original file line number Diff line number Diff line change
Expand Up @@ -74,11 +74,16 @@
Signature :

```
(
type PositionDescriptor =
{ x: number, y: number } |
{ selector: string } |
?{}

type scrollBehaviorHandler = (
to: Route,
from: Route,
savedPosition?: { x: number, y: number }
) => { x: number, y: number } | { selector: string } | ?{}
) => PositionDescriptor | Promise<PositionDescriptor>
```

Pour plus de détails, voir [Comportement du Scroll](../advanced/scroll-behavior.md).
Expand Down
23 changes: 23 additions & 0 deletions docs/fr/essentials/getting-started.md
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,29 @@ const app = new Vue({
// L'application est maintenant en marche !
```

En injectant le routeur, nous y avons accès à travers `this.$router`. Nous avons également accès à la route courante derrière `this.$route` depuis n'importe quel composant :

```js
// Home.vue
export default {
computed: {
username () {
// Nous verrons pourquoi `params` est court.
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Je n'ai pas compris cette phrase dans l'original. Ça disait « We will see what params is shortly ». Tu as une idée @posva ?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ca veut dire nous verrons ce que sont les params en un instant

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

je change ca, j'ai merge un peu trop vite 😅

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Merci @posva. Ça paraît tellement évident maintenant !

return this.$route.params.username
}
},
methods: {
goBack () {
window.history.length > 1
? this.$router.go(-1)
: this.$router.push('/')
}
}
}
```

Dans les documentations, nous allons souvent utiliser l'instance `router`. Gardez à l'esprit que l'utilisation de `this.$router` est exactement la même chose que celle de `router`. La raison pour laquelle nous utilisons `this.$router` est la possibilité ainsi offerte de ne pas avoir à importer le routeur dans chaque fichier de composant ayant besoin d'accéder au routage.

Vous pouvez aussi regarder cet [exemple](https://jsfiddle.net/yyx990803/xgrjzsup/).

Notez qu'un `<router-link>` obtiendra automatiquement la classe `.router-link-active` lorsque sa route cible correspond à la route actuelle. Vous pouvez en apprendre plus à propos de cela dans sa [documentation d'API](../api/router-link.md).
30 changes: 24 additions & 6 deletions docs/fr/essentials/history-mode.md
Original file line number Diff line number Diff line change
Expand Up @@ -43,24 +43,24 @@ location / {
#### Node.js natif

```js
const http = require("http")
const fs = require("fs")
const http = require('http')
const fs = require('fs')
const httpPort = 80

http.createServer((req, res) => {
fs.readFile("index.htm", "utf-8", (err, content) => {
fs.readFile('index.htm', 'utf-8', (err, content) => {
if (err) {
console.log(`Impossible d'ouvrir le fichier "index.htm"`)
     console.log(`Impossible d'ouvrir le fichier "index.htm"`)
}

res.writeHead(200, {
"Content-Type": "text/html; charset=utf-8"
'Content-Type': 'text/html; charset=utf-8'
})

res.end(content)
})
}).listen(httpPort, () => {
console.log("Le serveur écoute à : http://localhost:%s", httpPort)
console.log('Le serveur écoute à : http://localhost:%s', httpPort)
})
```

Expand Down Expand Up @@ -102,6 +102,24 @@ rewrite {
}
```

#### Hébergement Firebase

Ajouter ceci à votre fichier `firebase.json` :

```
{
"hosting": {
"public": "dist",
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}
```

## Limitation

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 :
Expand Down
2 changes: 2 additions & 0 deletions docs/fr/essentials/redirect-and-alias.md
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,8 @@ const router = new VueRouter({
})
```

Notez que les [intercepteurs de navigation](../advanced/navigation-guards.md) ne sont pas appliqués sur les routes d'où à lieu la redirection mais uniquement sur les routes cibles. Dans l'exemple ci-dessous, ajouter une interception `beforeEnter` ou `beforeLeave` à la route `/a` n'aura aucun effet.

Pour d'autres utilisations avancées, jetez un œil à cet [exemple](https://github.com/vuejs/vue-router/blob/dev/examples/redirect/app.js).

### Alias
Expand Down