Skip to content

Commit ced6e87

Browse files
MachinisteWebposva
authored andcommitted
[Doc FR]: Update with 2.5 version! (#1840)
* VueRouter vs. Vue Router Signed-off-by: Bruno Lesieur <[email protected]> * `VueRouter` vs. Vue Router * no changes for EN docs. Signed-off-by: Bruno Lesieur <[email protected]> * New review from @rspt Signed-off-by: Bruno Lesieur <[email protected]> * Introduce @rspt review Signed-off-by: Bruno Lesieur <[email protected]> * @posva review Signed-off-by: Bruno Lesieur <[email protected]> * Update documentation with version 2.5 Signed-off-by: Bruno Lesieur <[email protected]> * Little fixes Signed-off-by: Bruno Lesieur <[email protected]>
1 parent 6d97e5e commit ced6e87

File tree

7 files changed

+101
-14
lines changed

7 files changed

+101
-14
lines changed

Diff for: docs/fr/SUMMARY.md

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
# vue-router 2
2-
<!--email_off-->
3-
> 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).
4-
<!--/email_off-->
2+
3+
> Note aux utilisateurs de TypeScript : vue-router@3.0+ nécessite [email protected]+, et inverssement.
4+
55
**[Notes de version](https://github.com/vuejs/vue-router/releases)**
66

77
- [Installation](installation.md)

Diff for: docs/fr/advanced/navigation-guards.md

+23-2
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ Chaque fonction d'interception reçoit trois arguments :
3030

3131
- **`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`.
3232

33-
- **`next('/')` ou `next({ path: '/' })`**: redirige vers le nouvel URL. La navigation courante va être arrêtée et une nouvelle va se lancer.
33+
- **`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).
3434

3535
- **`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()`.
3636

@@ -116,7 +116,28 @@ beforeRouteEnter (to, from, next) {
116116
}
117117
```
118118

119-
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)`.
119+
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é* :
120+
121+
```js
122+
beforeRouteUpdate (to, from, next) {
123+
// utiliser juste `this`
124+
this.name = to.params.name
125+
next()
126+
}
127+
```
128+
129+
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)`.
130+
131+
```js
132+
beforeRouteLeave (to, from , next) {
133+
const answer = window.confirm('Voulez-vous vraiment quitter cette page ? Vos changements seront perdus.')
134+
if (answer) {
135+
next()
136+
} else {
137+
next(false)
138+
}
139+
}
140+
```
120141

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

Diff for: docs/fr/advanced/scroll-behavior.md

+19-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
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.
44

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

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

@@ -60,3 +60,21 @@ scrollBehavior (to, from, savedPosition) {
6060
```
6161

6262
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).
63+
64+
### Défilement asynchrone
65+
66+
> Nouveau dans la 2.8.0+
67+
68+
Vous pouvez également retourner une promesse pour résoudre la description de position souhaitée :
69+
70+
``` js
71+
scrollBehavior (to, from, savedPosition) {
72+
return new Promise((resolve, reject) => {
73+
setTimeout(() => {
74+
resolve({ x: 0, y: 0 })
75+
}, 500)
76+
})
77+
}
78+
```
79+
80+
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.

Diff for: docs/fr/api/options.md

+7-2
Original file line numberDiff line numberDiff line change
@@ -74,11 +74,16 @@
7474
Signature :
7575

7676
```
77-
(
77+
type PositionDescriptor =
78+
{ x: number, y: number } |
79+
{ selector: string } |
80+
?{}
81+
82+
type scrollBehaviorHandler = (
7883
to: Route,
7984
from: Route,
8085
savedPosition?: { x: number, y: number }
81-
) => { x: number, y: number } | { selector: string } | ?{}
86+
) => PositionDescriptor | Promise<PositionDescriptor>
8287
```
8388

8489
Pour plus de détails, voir [Comportement du Scroll](../advanced/scroll-behavior.md).

Diff for: docs/fr/essentials/getting-started.md

+23
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,29 @@ const app = new Vue({
6464
// L'application est maintenant en marche !
6565
```
6666

67+
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 :
68+
69+
```js
70+
// Home.vue
71+
export default {
72+
computed: {
73+
username () {
74+
// Nous verrons pourquoi `params` est court.
75+
return this.$route.params.username
76+
}
77+
},
78+
methods: {
79+
goBack () {
80+
window.history.length > 1
81+
? this.$router.go(-1)
82+
: this.$router.push('/')
83+
}
84+
}
85+
}
86+
```
87+
88+
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.
89+
6790
Vous pouvez aussi regarder cet [exemple](https://jsfiddle.net/yyx990803/xgrjzsup/).
6891

6992
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).

Diff for: docs/fr/essentials/history-mode.md

+24-6
Original file line numberDiff line numberDiff line change
@@ -43,24 +43,24 @@ location / {
4343
#### Node.js natif
4444

4545
```js
46-
const http = require("http")
47-
const fs = require("fs")
46+
const http = require('http')
47+
const fs = require('fs')
4848
const httpPort = 80
4949

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

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

6060
res.end(content)
6161
})
6262
}).listen(httpPort, () => {
63-
console.log("Le serveur écoute à : http://localhost:%s", httpPort)
63+
console.log('Le serveur écoute à : http://localhost:%s', httpPort)
6464
})
6565
```
6666

@@ -102,6 +102,24 @@ rewrite {
102102
}
103103
```
104104

105+
#### Hébergement Firebase
106+
107+
Ajouter ceci à votre fichier `firebase.json` :
108+
109+
```
110+
{
111+
"hosting": {
112+
"public": "dist",
113+
"rewrites": [
114+
{
115+
"source": "**",
116+
"destination": "/index.html"
117+
}
118+
]
119+
}
120+
}
121+
```
122+
105123
## Limitation
106124

107125
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 :

Diff for: docs/fr/essentials/redirect-and-alias.md

+2
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,8 @@ const router = new VueRouter({
3535
})
3636
```
3737

38+
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.
39+
3840
Pour d'autres utilisations avancées, jetez un œil à cet [exemple](https://github.com/vuejs/vue-router/blob/dev/examples/redirect/app.js).
3941

4042
### Alias

0 commit comments

Comments
 (0)