` est équivalent à appeler `router.push(...)`.
@@ -30,8 +30,22 @@ router.push({ name: 'user', params: { userId: 123 }})
router.push({ path: 'register', query: { plan: 'private' }})
```
+**Note :** `params` est ignoré si `path` est fourni, ce qui n'est pas le cas pour `query`, comme démontré dans l'exemple ci-dessous. À la place, vous devez fournir le `name` de la route ou manuellement spécifier le `path` complet avec tous les paramètres :
+
+```js
+const userId = 123
+router.push({ name: 'user', params: { userId }}) // -> /user/123
+router.push({ path: `/user/${userId}` }) // -> /user/123
+// Ceci ne vas PAS fonctionner
+router.push({ path: '/user', params: { userId }}) // -> /user
+```
+
+Les mêmes règles s'appliquent pour la propriété `to` du composant `router-link`.
+
Dans la version 2.2.0+, vous pouvez optionnellement fournir les fonctions de rappel `onComplete` et `onAbort` à `router.push` ou `router.replace` en tant que deuxième et troisième arguments. Ces fonctions de rappel seront appelées quand la navigation sera respectivement ; complétée avec succès (après la résolution de tous les hooks asynchrones), ou arrêtée (navigation vers la même route ou vers une route différente avant que la navigation courante ne soit achevée).
+**Note :** si la destination est la même que la route courante et que seuls les paramètres ont changés (par ex. naviguer d'un profil à l'autre `/utilisateurs/1` -> `/utilisateurs/2`), vous devrez utiliser [beforeRouteUpdate](./dynamic-matching.html#réactivité-aux-changements-de-paramètres) pour réagir aux changements (par ex. récupérer les informations de l'utilisateur).
+
#### `router.replace(location, onComplete?, onAbort?)`
Il agit comme `router.push`. La seule différence est que la navigation se fait sans ajouter de nouvelle entrée dans la pile de l'historique. Comme son nom l'indique, il remplace l'entrée courante.
diff --git a/docs/fr/essentials/nested-routes.md b/docs/fr/essentials/nested-routes.md
index 998dc05d1..8c3d007be 100644
--- a/docs/fr/essentials/nested-routes.md
+++ b/docs/fr/essentials/nested-routes.md
@@ -1,6 +1,6 @@
# Routes imbriquées
-Les vrais interfaces utilisateurs d'application sont faites de composants imbriqués à de multiples niveaux de profondeur. Il est aussi très commun que les segments d'URLs correspondent à une certaine structure de composants imbriqués, par exemple :
+Les vrais interfaces utilisateurs d'application sont faites de composants imbriqués à de multiples niveaux de profondeur. Il est aussi très commun que les segments d'URL correspondent à une certaine structure de composants imbriqués, par exemple :
```
/utilisateur/foo/profil /utilisateur/foo/billets
@@ -73,7 +73,7 @@ const router = new VueRouter({
})
```
-**Notez que les chemins imbriqués commençant par `/` vont être traités comme des chemins partant de la racine. Cela vous permet d'adresser des composants imbriqués sans avoir à utiliser une URL imbriquée.**
+**Notez que les chemins imbriqués commençant par `/` vont être traités comme des chemins partant de la racine. Cela vous permet d'adresser des composants imbriqués sans avoir à utiliser un URL imbriqué.**
Comme vous pouvez le voir, l'option `children` n'est qu'un autre tableau d'objet de configuration de route comme dans `routes`. Et donc, vous pouvez garder les vues imbriquées au plus près de vos besoins.
diff --git a/docs/fr/essentials/passing-props.md b/docs/fr/essentials/passing-props.md
index 6ed2711c3..15f0ba81d 100644
--- a/docs/fr/essentials/passing-props.md
+++ b/docs/fr/essentials/passing-props.md
@@ -1,36 +1,36 @@
-# Passing Props to Route Components (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).*
+# Passage de props aux composants de route
-Using `$route` in your component creates a tight coupling with the route which limits the flexibility of the component as it can only be used on certain urls.
+Utiliser `$route` dans vos composants crée un couplage fort à la route qui va limiter la flexibilité du composant qui ne pourra être utilisé que par certains URL.
-To decouple this component from the router use props:
+Pour découpler un composant de son routeur, utilisez les props :
-**❌ Coupled to $route**
+**❌ Couplé avec `$route`**
``` js
const User = {
- template: 'User {{ $route.params.id }}
'
+ template: 'Utilisateur {{ $route.params.id }}
'
}
const router = new VueRouter({
routes: [
- { path: '/user/:id', component: User }
+ { path: '/utilisateur/:id', component: User }
]
})
```
-**👍 Decoupled with props**
+**👍 Découplé avec les `props`**
``` js
const User = {
props: ['id'],
- template: 'User {{ id }}
'
+ template: 'Utilisateur {{ id }}
'
}
const router = new VueRouter({
routes: [
- { path: '/user/:id', component: User, props: true }
-
- // for routes with named views, you have to define the props option for each named view:
+ { path: '/utilisateur/:id', component: User, props: true }
+
+ // pour les routes avec vues nommées, vous devez définir l'option `props` pour chaque vue nommée :
{
- path: '/user/:id',
+ path: '/utilisateur/:id',
components: { default: User, sidebar: Sidebar },
props: { default: true, sidebar: false }
}
@@ -38,16 +38,15 @@ const router = new VueRouter({
})
```
-This allows you to use the component anywhere, which makes the component easier to reuse and test.
+Cela vous permet d'utiliser le composant n'importe où, ce qui le rend plus facile à réutiliser et à tester.
-### Boolean mode
+### Mode booléen
-When props is set to true, the route.params will be set as the component props.
+Quand `props` est mis à `true`, le `route.params` est remplis en tant que props du composant.
-### Object mode
+### Mode objet
-When props is an object, this will be set as the component props as-is.
-Useful for when the props are static.
+Quand `props` est un objet, cela alimente les props de celui-ci. Utile quand les props sont statiques.
``` js
const router = new VueRouter({
@@ -57,10 +56,9 @@ const router = new VueRouter({
})
```
-### Function mode
+### Mode fonction
-You can create a function that returns props.
-This allows you to cast the parameter to another type, combine static values with route-based values, etc.
+Vous pouvez créer une fonction qui va retourner les props. Cela vous permet de caster des paramètres dans un autre type, de combiner les valeurs statiques avec les valeurs des routes, etc.
``` js
const router = new VueRouter({
@@ -70,10 +68,8 @@ const router = new VueRouter({
})
```
-The url: `/search?q=vue` would pass `{query: "vue"}` as props to the SearchUser component.
-
-Try to keep the props function stateless, as it's only evaluated on route changes.
-Use a wrapper component if you need state to define the props, that way vue can react to state changes.
+L'URL `/search?q=vue` passerait `{query: 'vue'}` comme `props` au composant `SearchUser`.
+Essayez de garder la fonction de `props` sans état, car il n'est évalué que sur les changements de route. Utilisez un composant englobant si vous avez besoin d'état pour définir les props, ainsi la vue pourra réagir au changement d'état.
-For advanced usage, checkout the [example](https://github.com/vuejs/vue-router/blob/dev/examples/route-props/app.js).
+Pour une utilisation avancée, jettez un œil à cet [exemple](https://github.com/vuejs/vue-router/blob/dev/examples/route-props/app.js).
diff --git a/docs/fr/essentials/redirect-and-alias.md b/docs/fr/essentials/redirect-and-alias.md
index bcd9954dd..78a2006d3 100644
--- a/docs/fr/essentials/redirect-and-alias.md
+++ b/docs/fr/essentials/redirect-and-alias.md
@@ -39,7 +39,7 @@ Pour d'autres utilisations avancées, jetez un œil à cet [exemple](https://git
### Alias
-Une redirection signifie que si l'utilisateur visite `/a`, l'URL va être remplacée par `/b` et concordé avec `/b`. Mais qu'est-ce qu'un alias ?
+Une redirection signifie que si l'utilisateur visite `/a`, l'URL va être remplacé par `/b` et concordé avec `/b`. Mais qu'est-ce qu'un alias ?
** Un alias de `/a` en tant que `/b` signifie que lorsque l'utilisateur va visiter `/b`, l'URL vas rester `/b`, mais la concordance va se faire comme si l'utilisateur visitait `/a`.**
@@ -53,6 +53,6 @@ const router = new VueRouter({
})
```
-Un alias vous donne la liberté d'associer une structure d'interface utilisateur à une URL arbitraire, au lieu d'être contraint par une configuration de structure.
+Un alias vous donne la liberté d'associer une structure d'interface utilisateur à un URL arbitraire, au lieu d'être contraint par une configuration de structure.
Pour d'autres utilisations avancées, jetez un œil à cet [exemple](https://github.com/vuejs/vue-router/blob/dev/examples/route-alias/app.js).
diff --git a/docs/fr/installation.md b/docs/fr/installation.md
index b57f2cea6..21ead6cbe 100644
--- a/docs/fr/installation.md
+++ b/docs/fr/installation.md
@@ -5,7 +5,7 @@
[https://unpkg.com/vue-router/dist/vue-router.js](https://unpkg.com/vue-router/dist/vue-router.js)
-[Unpkg.com](https://unpkg.com) fournit des liens CDN basés sur NPM. Le lien ci-dessus pointera toujours vers la dernière release sur NPM. Vous pouvez aussi utiliser un tag ou une version spécifique via une URL comme `https://unpkg.com/vue-router@2.0.0/dist/vue-router.js`.
+[Unpkg.com](https://unpkg.com) fournit des liens CDN basés sur npm. Le lien ci-dessus pointera toujours vers la dernière version sur npm. Vous pouvez aussi utiliser un tag ou une version spécifique via un URL comme `https://unpkg.com/vue-router@2.0.0/dist/vue-router.js`.
Incluez `vue-router` après Vue et l'installation sera automatique :
@@ -15,7 +15,7 @@ Incluez `vue-router` après Vue et l'installation sera automatique :
```
-### NPM
+### npm
``` bash
npm install vue-router