From 52d0235213d45791bb033a0bc801bda31a03d2b8 Mon Sep 17 00:00:00 2001 From: Bruno Lesieur Date: Tue, 26 Sep 2017 08:35:26 +0200 Subject: [PATCH 01/14] VueRouter vs. Vue Router Signed-off-by: Bruno Lesieur --- docs/fr/advanced/lazy-loading.md | 2 +- docs/fr/essentials/getting-started.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/fr/advanced/lazy-loading.md b/docs/fr/advanced/lazy-loading.md index 97c097e27..4f39e1044 100644 --- a/docs/fr/advanced/lazy-loading.md +++ b/docs/fr/advanced/lazy-loading.md @@ -2,7 +2,7 @@ Pendant la construction d'applications avec un empaqueteur (« bundler »), le paquetage JavaScript peut devenir un peu lourd, et donc cela peut affecter le temps de chargement de la page. Il serait plus efficace si l'on pouvait séparer chaque composant de route dans des fragments séparés, et de les charger uniquement lorsque la route est visitée. -En combinant la [fonctionnalité de composant asynchrone](https://fr.vuejs.org/v2/guide/components.html#Composants-asynchrones) de Vue et la [fonctionnalité de séparation de code](https://webpack.js.org/guides/code-splitting-async/) de webpack, il est très facile de charger à la volée les composants de route. +En combinant la [fonctionnalité de composant asynchrone](https://fr.vuejs.org/v2/guide/components.html#Composants-asynchrones) de Vue et la [fonctionnalité de scission de code](https://webpack.js.org/guides/code-splitting-async/) de webpack, il est très facile de charger à la volée les composants de route. Premièrement, un composant asynchrone peut définir une fonction fabrique qui retourne une Promesse (qui devrait résoudre le composant lui-même) : diff --git a/docs/fr/essentials/getting-started.md b/docs/fr/essentials/getting-started.md index 0e744ff1d..03cfc4a5d 100644 --- a/docs/fr/essentials/getting-started.md +++ b/docs/fr/essentials/getting-started.md @@ -30,7 +30,7 @@ Créer une application monopage avec Vue + Vue Router est vraiment simple. Avec ### JavaScript ``` js -// 0. Si vous utilisez un système de module (ex : via vue-cli), il faut importer Vue et VueRouter et ensuite appeler `Vue.use(VueRouter)`. +// 0. Si vous utilisez un système de module (par ex. via vue-cli), il faut importer Vue et Vue Router et ensuite appeler `Vue.use(VueRouter)`. // 1. Définissez les composants de route. // Ces derniers peuvent être importés depuis d'autre fichier From cbc56ac2ba75bd170195133d74af12c8adbeef97 Mon Sep 17 00:00:00 2001 From: Bruno Lesieur Date: Tue, 26 Sep 2017 08:36:29 +0200 Subject: [PATCH 02/14] `VueRouter` vs. Vue Router --- docs/en/essentials/getting-started.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/en/essentials/getting-started.md b/docs/en/essentials/getting-started.md index d4de95a3b..ecb2a670e 100644 --- a/docs/en/essentials/getting-started.md +++ b/docs/en/essentials/getting-started.md @@ -30,7 +30,7 @@ Creating a Single-page Application with Vue + Vue Router is dead simple. With Vu ### JavaScript ``` js -// 0. If using a module system (e.g. via vue-cli), import Vue and VueRouter +// 0. If using a module system (e.g. via vue-cli), import Vue and Vue Router // and then call `Vue.use(VueRouter)`. // 1. Define route components. From edad4f33d6c3ea2abfd55598f46091a59919c9a3 Mon Sep 17 00:00:00 2001 From: Bruno Lesieur Date: Tue, 26 Sep 2017 12:51:04 +0200 Subject: [PATCH 03/14] no changes for EN docs. Signed-off-by: Bruno Lesieur --- docs/en/essentials/getting-started.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/en/essentials/getting-started.md b/docs/en/essentials/getting-started.md index ecb2a670e..d4de95a3b 100644 --- a/docs/en/essentials/getting-started.md +++ b/docs/en/essentials/getting-started.md @@ -30,7 +30,7 @@ Creating a Single-page Application with Vue + Vue Router is dead simple. With Vu ### JavaScript ``` js -// 0. If using a module system (e.g. via vue-cli), import Vue and Vue Router +// 0. If using a module system (e.g. via vue-cli), import Vue and VueRouter // and then call `Vue.use(VueRouter)`. // 1. Define route components. From 2fc71168c7a9626288a3fb57e844acbe7a4cb67e Mon Sep 17 00:00:00 2001 From: Bruno Lesieur Date: Sat, 30 Sep 2017 16:37:16 +0200 Subject: [PATCH 04/14] New review from @rspt Signed-off-by: Bruno Lesieur --- docs/fr/advanced/lazy-loading.md | 2 +- docs/fr/api/router-link.md | 4 ---- docs/fr/essentials/dynamic-matching.md | 2 +- docs/fr/essentials/getting-started.md | 2 +- docs/fr/essentials/navigation.md | 3 +-- docs/fr/essentials/nested-routes.md | 2 +- 6 files changed, 5 insertions(+), 10 deletions(-) diff --git a/docs/fr/advanced/lazy-loading.md b/docs/fr/advanced/lazy-loading.md index 4f39e1044..fe464cad4 100644 --- a/docs/fr/advanced/lazy-loading.md +++ b/docs/fr/advanced/lazy-loading.md @@ -16,7 +16,7 @@ Deuxièmement, avec webpack 2, nous pouvons utiliser la syntaxe d'[import dynami import('./Foo.vue') // returns a Promise ``` -> Note: if you are using Babel, you will need to add the [syntax-dynamic-import](http://babeljs.io/docs/plugins/syntax-dynamic-import/) plugin so that Babel can properly parse the syntax. +> Note: if you are using Babel, you will need to add the [syntax-dynamic-import](https://babeljs.io/docs/plugins/syntax-dynamic-import/) plugin so that Babel can properly parse the syntax. Combining the two, this is how to define an async component that will be automatically code-split by webpack: diff --git a/docs/fr/api/router-link.md b/docs/fr/api/router-link.md index 379e27826..f35a20fbb 100644 --- a/docs/fr/api/router-link.md +++ b/docs/fr/api/router-link.md @@ -42,7 +42,6 @@ S'enregistrer ``` - - **replace** - type : `boolean` @@ -55,7 +54,6 @@ ``` - - **append** - type : `boolean` @@ -68,7 +66,6 @@ ``` - - **tag** - type : `string` @@ -83,7 +80,6 @@
  • foo
    • ``` - - **active-class** - type : `string` diff --git a/docs/fr/essentials/dynamic-matching.md b/docs/fr/essentials/dynamic-matching.md index 45d911bad..437c322b2 100644 --- a/docs/fr/essentials/dynamic-matching.md +++ b/docs/fr/essentials/dynamic-matching.md @@ -25,7 +25,7 @@ const User = { } ``` -Vous pouvez regarder un exemple en ligne [ici](http://jsfiddle.net/yyx990803/4xfa2f19/). +Vous pouvez regarder un exemple en ligne [ici](https://jsfiddle.net/yyx990803/4xfa2f19/). Vous pouvez avoir plusieurs segments dynamiques pour une même route, et ils seront associés aux champs associés dans `$route.params`. Des exemples : diff --git a/docs/fr/essentials/getting-started.md b/docs/fr/essentials/getting-started.md index 03cfc4a5d..4dee272f9 100644 --- a/docs/fr/essentials/getting-started.md +++ b/docs/fr/essentials/getting-started.md @@ -64,6 +64,6 @@ const app = new Vue({ // L'application est maintenant en marche ! ``` -Vous pouvez aussi regarder cet [exemple](http://jsfiddle.net/yyx990803/xgrjzsup/). +Vous pouvez aussi regarder cet [exemple](https://jsfiddle.net/yyx990803/xgrjzsup/). Notez qu'un `` 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 --git a/docs/fr/essentials/navigation.md b/docs/fr/essentials/navigation.md index 72949fa51..851ce7d92 100644 --- a/docs/fr/essentials/navigation.md +++ b/docs/fr/essentials/navigation.md @@ -44,7 +44,7 @@ Les mêmes règles s'appliquent pour la propriété `to` du composant `router-li 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). +**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?)` @@ -54,7 +54,6 @@ Il agit comme `router.push`. La seule différence est que la navigation se fait |-------------|--------------| | `` | `router.replace(...)` | - #### `router.go(n)` Cette méthode prend un seul nombre en tant que paramètre. Celui-ci indique de combien d'entrée vers l'avant ou vers l'arrière il faut naviguer dans la pile de l'historique, de la même manière qu'avec `window.history.go(n)`. diff --git a/docs/fr/essentials/nested-routes.md b/docs/fr/essentials/nested-routes.md index 8c3d007be..da8142896 100644 --- a/docs/fr/essentials/nested-routes.md +++ b/docs/fr/essentials/nested-routes.md @@ -96,4 +96,4 @@ const router = new VueRouter({ }) ``` -Une démo de fonctionnement de cet exemple peut-être trouvée [ici](http://jsfiddle.net/yyx990803/L7hscd8h/). +Une démo de fonctionnement de cet exemple peut-être trouvée [ici](https://jsfiddle.net/yyx990803/L7hscd8h/). From 00f680ecfaf9c9f4627301a8d6969dbded0056a7 Mon Sep 17 00:00:00 2001 From: Bruno Lesieur Date: Sat, 30 Sep 2017 16:55:21 +0200 Subject: [PATCH 05/14] Introduce @rspt review Signed-off-by: Bruno Lesieur --- docs/fr/SUMMARY.md | 2 +- docs/fr/advanced/data-fetching.md | 6 +++--- docs/fr/advanced/lazy-loading.md | 4 ++-- docs/fr/advanced/meta.md | 2 +- docs/fr/advanced/navigation-guards.md | 20 ++++++++++---------- docs/fr/advanced/scroll-behavior.md | 2 +- docs/fr/advanced/transitions.md | 2 +- docs/fr/api/options.md | 6 +++--- docs/fr/api/route-object.md | 6 +++--- docs/fr/api/router-instance.md | 8 ++++---- docs/fr/api/router-link.md | 24 ++++++++++++++---------- docs/fr/api/router-view.md | 2 +- docs/fr/essentials/dynamic-matching.md | 2 +- docs/fr/essentials/history-mode.md | 6 +++--- docs/fr/essentials/named-routes.md | 2 +- docs/fr/essentials/named-views.md | 4 ++-- docs/fr/essentials/navigation.md | 11 ++++++----- docs/fr/essentials/nested-routes.md | 6 +++--- docs/fr/essentials/passing-props.md | 2 +- docs/fr/essentials/redirect-and-alias.md | 2 +- 20 files changed, 62 insertions(+), 57 deletions(-) diff --git a/docs/fr/SUMMARY.md b/docs/fr/SUMMARY.md index 1cc1d5710..c601ba47b 100644 --- a/docs/fr/SUMMARY.md +++ b/docs/fr/SUMMARY.md @@ -22,7 +22,7 @@ - [Récupération de données](advanced/data-fetching.md) - [Comportement du défilement](advanced/scroll-behavior.md) - [Chargement à la volée](advanced/lazy-loading.md) -- Réference de l'API +- Référence de l'API - [Options de construction du routeur](api/options.md) - [routes](api/options.md#routes) - [mode](api/options.md#mode) diff --git a/docs/fr/advanced/data-fetching.md b/docs/fr/advanced/data-fetching.md index 8ff6c4072..e34f83535 100644 --- a/docs/fr/advanced/data-fetching.md +++ b/docs/fr/advanced/data-fetching.md @@ -2,9 +2,9 @@ Parfois vous avez besoin de récupérer des données depuis le serveur lorsqu'une route est activée. Par exemple, avant de faire le rendu d'un profil utilisateur, vous avez besoin de récupérer les données de l'utilisateur depuis le serveur. Nous pouvons y parvenir de deux façons différentes : -- **Récupération de donnée après la navigation** : effectue la navigation en premier, et récupère les données dans le hook entrant du cycle de vie d'un composant. Affiche un état de chargement pendant que les données sont en train d'être récupérées. +- **Récupération de données après la navigation** : effectue la navigation en premier, et récupère les données dans le hook entrant du cycle de vie d'un composant. Affiche un état de chargement pendant que les données sont en train d'être récupérées. -- **Récupération de donnée avant la navigation** : récupère les données avant la navigation dans la fonction d'interception d'entrée de la route, et effectue la navigation après que les données aient été récupérées. +- **Récupération de données avant la navigation** : récupère les données avant la navigation dans la fonction d'interception d'entrée de la route, et effectue la navigation après que les données aient été récupérées. Techniquement, les deux choix sont valides. Cela dépend de l'expérience utilisateur que vous souhaitez apporter. @@ -71,7 +71,7 @@ export default { ## Récupération de données avant la navigation -Avec cette approche, nous récupérerons les données avant de naviguer vers la nouvelle route. Nous pouvons effectuer la récupération de données dans la fonction d'interception `beforeRouteEnter` du composant à venir, et seulement appeler `next` lorsque la récupération est terminée : +Avec cette approche, nous récupèrerons les données avant de naviguer vers la nouvelle route. Nous pouvons effectuer la récupération de données dans la fonction d'interception `beforeRouteEnter` du composant à venir, et seulement appeler `next` lorsque la récupération est terminée : ``` js export default { diff --git a/docs/fr/advanced/lazy-loading.md b/docs/fr/advanced/lazy-loading.md index fe464cad4..99582d2d9 100644 --- a/docs/fr/advanced/lazy-loading.md +++ b/docs/fr/advanced/lazy-loading.md @@ -16,9 +16,9 @@ Deuxièmement, avec webpack 2, nous pouvons utiliser la syntaxe d'[import dynami import('./Foo.vue') // returns a Promise ``` -> Note: if you are using Babel, you will need to add the [syntax-dynamic-import](https://babeljs.io/docs/plugins/syntax-dynamic-import/) plugin so that Babel can properly parse the syntax. +> Note: si vous utilisez Babel, vous aurez besoin d'ajouter le plugin [syntax-dynamic-import](http://babeljs.io/docs/plugins/syntax-dynamic-import/) de façon à ce que Babel puisse analyser correctement la syntaxe. -Combining the two, this is how to define an async component that will be automatically code-split by webpack: +En combinant les deux, on définit un composant asynchrone qui sera automatiquement scindé par webpack : ``` js const Foo = () => import('./Foo.vue') diff --git a/docs/fr/advanced/meta.md b/docs/fr/advanced/meta.md index f4664eceb..24dc5ccd0 100644 --- a/docs/fr/advanced/meta.md +++ b/docs/fr/advanced/meta.md @@ -27,7 +27,7 @@ Tout d'abord, chaque objet route dans la configuration de `routes` est appelé u Par exemple, avec la configuration de route ci-dessous, l'URL `/foo/bar` va concorder avec le registre parent et le registre enfant. -Tous les registres concordant avec une route sont exposés dans l'objet `$route` (ainsi que les objets de route dans les sécurisations de navigation) dans le tableau `$route.matched`. Donc, nous devons itérer à travers `$route.matched` pour vérifier les champs meta dans les registres de route. +Tous les registres concordants avec une route sont exposés dans l'objet `$route` (ainsi que les objets de route dans les sécurisations de navigation) dans le tableau `$route.matched`. Donc, nous devons itérer à travers `$route.matched` pour vérifier les champs meta dans les registres de route. Un exemple concret est la vérification d'un champ meta dans une interception de navigation globale : diff --git a/docs/fr/advanced/navigation-guards.md b/docs/fr/advanced/navigation-guards.md index 4843a3d6c..4937bb1ae 100644 --- a/docs/fr/advanced/navigation-guards.md +++ b/docs/fr/advanced/navigation-guards.md @@ -16,7 +16,7 @@ router.beforeEach((to, from, next) => { }) ``` -Les interceptions d'entrées globales sont appelées lors de l'ordre de création, chaque fois qu'une navigation est déclenchée. Les interceptions peuvent être résolues de manière asynchrone, et la navigation est considérée comme **en attente** avant que tous les hooks ne soient résolues. +Les interceptions d'entrées globales sont appelées lors de l'ordre de création, chaque fois qu'une navigation est déclenchée. Les interceptions peuvent être résolues de manière asynchrone, et la navigation est considérée comme **en attente** avant que tous les hooks ne soient résolus. Chaque fonction d'interception reçoit trois arguments : @@ -26,7 +26,7 @@ Chaque fonction d'interception reçoit trois arguments : - **`next: Function`**: cette fonction doit être appelée pour **résoudre** le hook. L'action dépend des arguments fournis à `next`: - - **`next()`**: se déplacer jusqu'au prochain hook du workflow. S'il ne reste aucun hooks, la navigation est **confirmée**. + - **`next()`**: se déplacer jusqu'au prochain hook du workflow. S'il ne reste aucun hook, la navigation est **confirmée**. - **`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`. @@ -40,7 +40,7 @@ Chaque fonction d'interception reçoit trois arguments : > Nouveau dans la 2.5.0 -Dans la 2.5.0+ vous pouvez abonner une interception globale avec `router.beforeResolve`. Ceci est similaire a `router.beforeEach`, mais la différence est qu'elle sera appelée juste après que la navigation soit confirmée, **après que toutes les interceptions par composants et les composants de route asynchrone ai été résolus**. +Dans la 2.5.0+ vous pouvez abonner une interception globale avec `router.beforeResolve`. Ceci est similaire a `router.beforeEach`, mais la différence est qu'elle sera appelée juste après que la navigation soit confirmée, **après que toutes les interceptions par composants et les composants de route asynchrone ait été résolu**. ### Hooks de sortie globaux @@ -54,7 +54,7 @@ router.afterEach((to, from) => { ### Interception par route -Vous pouvez définir la interception `beforeEnter` directement sur l'objet de configuration d'une route : +Vous pouvez définir l'interception `beforeEnter` directement sur l'objet de configuration d'une route : ``` js const router = new VueRouter({ @@ -93,7 +93,7 @@ const Foo = { // mais que ce composant est utilisé de nouveau dans la nouvelle route. // Par exemple, pour une route avec le paramètre dynamique `/foo/:id`, quand nous // naviguons entre `/foo/1` et `/foo/2`, la même instance du composant `Foo` - // va être ré-utilisée, et ce hook va être appelé quand cela arrivera. + // va être réutilisée, et ce hook va être appelé quand cela arrivera. // ce hook a accès à l'instance de ce composant via `this`. }, beforeRouteLeave (to, from, next) { @@ -104,7 +104,7 @@ const Foo = { } ``` -L'interception `beforeRouteEnter` **n'**a **PAS** accès à `this`, car l'interception est appelée avant que la navigation soit confirmée, et le nouveau composant entrant n'a même pas encore été crée. +L'interception `beforeRouteEnter` **n'**a **PAS** accès à `this`, car l'interception est appelée avant que la navigation soit confirmée, et le nouveau composant entrant n'a même pas encore été créé. Cependant, vous pouvez accéder à l'instance en passant dans la fonction de rappel `next`. Cette fonction de rappel va être appelée quand la navigation sera confirmée, et l'instance du composant sera passée à la fonction de rappel en tant qu'argument : @@ -116,19 +116,19 @@ 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 sauver ses modifications. La navigation peut être annulée en appelant `next(false)`. +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)`. ### Le flux de résolution de navigation complet 1. La navigation est demandée. -2. Appel de la interception de sortie des composants désactivés (ceux que l'on va quitter). +2. Appel de l'interception de sortie des composants désactivés (ceux que l'on va quitter). 3. Appel des interceptions globales `beforeEach`. -4. Appel des interceptions `beforeRouteUpdate` pour les composants ré-utilisés (2.2+). +4. Appel des interceptions `beforeRouteUpdate` pour les composants réutilisés (2.2+). 5. Appel de `beforeEnter` dans la configuration de route. 6. Résolution des composants de route asynchrones. 7. Appel de `beforeRouteEnter` dans les composants activés (ceux où l'on va arriver). 8. Appel des interceptions `beforeResolve` (2.5+). 9. Confirmation de la navigation. 10. Appel des hooks globaux `afterEach`. -11. Modification du DOM demandées. +11. Modification du DOM demandée. 12. Appel des fonctions de rappel passées à `next` dans l'interception `beforeRouteEnter` avec l'instance instanciée. diff --git a/docs/fr/advanced/scroll-behavior.md b/docs/fr/advanced/scroll-behavior.md index 3215b18ff..5e14fd67a 100644 --- a/docs/fr/advanced/scroll-behavior.md +++ b/docs/fr/advanced/scroll-behavior.md @@ -34,7 +34,7 @@ scrollBehavior (to, from, savedPosition) { Cela permettra de défiler au haut de page à chaque navigation à travers les routes. -Retourner l'objet `savedPosition` résultera en un comportement quasi-natif en naviguant avec les boutons précédents/suivants : +Retourner l'objet `savedPosition` résultera en un comportement quasi natif en naviguant avec les boutons précédents/suivants : ``` js scrollBehavior (to, from, savedPosition) { diff --git a/docs/fr/advanced/transitions.md b/docs/fr/advanced/transitions.md index 5d998ddb8..2bb63c47c 100644 --- a/docs/fr/advanced/transitions.md +++ b/docs/fr/advanced/transitions.md @@ -12,7 +12,7 @@ Vu que `` est essentiellement un composant dynamique, on peut lui a ### Transition par route -L'utilisation au dessus applique la même transition pour chaque route. Si vous voulez que les composants de route aient des transitions différentes, vous pouvez utiliser à la place `` avec des noms différents à l'intérieur de chaque composant de route : +L'utilisation du dessus applique la même transition pour chaque route. Si vous voulez que les composants de route aient des transitions différentes, vous pouvez utiliser à la place `` avec des noms différents à l'intérieur de chaque composant de route : ``` js const Foo = { diff --git a/docs/fr/api/options.md b/docs/fr/api/options.md index 5ec49d1ce..3cc6f78a5 100644 --- a/docs/fr/api/options.md +++ b/docs/fr/api/options.md @@ -65,7 +65,7 @@ - default : `"router-link-exact-active"` - Configure de manière globale la classe active par défaut de `` lors d'une correspondance exact. Voir aussi [router-link](router-link.md). + Configure de manière globale la classe active par défaut de `` lors d'une correspondance exacte. Voir aussi [router-link](router-link.md). ### scrollBehavior @@ -89,7 +89,7 @@ - type : `Function` - Permet de spécifier des fonctions personnalisées pour formater en objet ou en chaîne de caractères la requête. Surcharge les fonctions par défaut. + Permets de spécifier des fonctions personnalisées pour formater en objet ou en chaîne de caractères la requête. Surcharge les fonctions par défaut. ### fallback @@ -99,4 +99,4 @@ Contrôle comment le routeur devrait passer en mode `hash` quand le navigateur ne supporte pas `history.pushState`. Par défaut à `true`. - Passer cette valeur à `false` va essentiellement faire que la navigation via `router-link` va réclamer un rechargement de page dans IE9. Ceci est utile quand l'application est rendu côté serveur et à besoin de fonctionner dans IE9, car le mode hash ne fonctionne pas avec du SSR. + Passer cette valeur à `false` va essentiellement faire que la navigation via `router-link` va réclamer un rechargement de page dans IE9. Ceci est utile quand l'application est rendue côté serveur et à besoin de fonctionner dans IE9, car le mode hash ne fonctionne pas avec du SSR. diff --git a/docs/fr/api/route-object.md b/docs/fr/api/route-object.md index 50269c38b..d10c1103e 100644 --- a/docs/fr/api/route-object.md +++ b/docs/fr/api/route-object.md @@ -36,7 +36,7 @@ L'objet `Route` peut être trouvé à plusieurs endroits : - type : `string` - Une chaîne de caractères représentant le chemin de la route en cours, toujours résolue en tant que chemin absolu, ex : `"/foo/bar"`. + Une chaine de caractères représentant le chemin de la route en cours, toujours résolue en tant que chemin absolu, ex : `"/foo/bar"`. - **$route.params** @@ -48,13 +48,13 @@ L'objet `Route` peut être trouvé à plusieurs endroits : - type : `Object` - Un objet qui contient des pairs clé/valeur de la requête au format d'une chaîne de caractères. Par exemple, pour un chemin `/foo?user=1`, on aura `$route.query.user == 1`. S'il n'y a pas de requête, alors la valeur sera un objet vide. + Un objet qui contient des pairs clé/valeur de la requête au format d'une chaine de caractères. Par exemple, pour un chemin `/foo?user=1`, on aura `$route.query.user == 1`. S'il n'y a pas de requête, alors la valeur sera un objet vide. - **$route.hash** - type : `string` - Le hash de la route courante (avec le `#`), s'il y en a un. S'il n'y a pas de hash, alors la valeur sera une chaîne de caractères vide. + Le hash de la route courante (avec le `#`), s'il y en a un. S'il n'y a pas de hash, alors la valeur sera une chaine de caractères vide. - **$route.fullPath** diff --git a/docs/fr/api/router-instance.md b/docs/fr/api/router-instance.md index e7714991b..73a017510 100644 --- a/docs/fr/api/router-instance.md +++ b/docs/fr/api/router-instance.md @@ -40,7 +40,7 @@ - **router.getMatchedComponents(location?)** - Retourne un tableau de composants (définition/constructeur et non les instances) correspondant à la `location` passée en paramètre, ou alors de la route actuelle. Cette fonction est principalement utilisée pendant le rendu côté serveur afin d'effectuer une pré-récupération des données. + Retourne un tableau de composants (définition/constructeur et non les instances) correspondant à la `location` passée en paramètre, ou alors de la route actuelle. Cette fonction est principalement utilisée pendant le rendu côté serveur afin d'effectuer une prérécupération des données. - **router.resolve(location, current?, append?)** @@ -63,7 +63,7 @@ > 2.2.0+ - Permet d'ajouter dynamiquement des routes au routeur. L'argument doit être un tableau utilisant le même format de configuration que l'option `routes` du constructeur. + Permets d'ajouter dynamiquement des routes au routeur. L'argument doit être un tableau utilisant le même format de configuration que l'option `routes` du constructeur. - **router.onReady(callback, [errorCallback])** @@ -73,7 +73,7 @@ C'est utile pendant un rendu côté serveur pour assurer une sortie consistance sur le serveur et le client. - Le deuxième argument `errorCallback` est uniquement supporté à partir de la version 2.4. Il sera appelé lorsque la résolution de la route initiale résultera en une erreur (ex : la résolution d'un composant asynchrone qui a échouée). + Le deuxième argument `errorCallback` est uniquement supporté à partir de la version 2.4. Il sera appelé lorsque la résolution de la route initiale résultera en une erreur (ex. : la résolution d'un composant asynchrone qui a échoué). - **router.onError(callback)** @@ -83,6 +83,6 @@ - L'erreur est lancée de manière synchrone à l'intérieur d'une fonction d'interception de route ; - - L'erreur est capturée et traitée de manière asynchrone en appelant `next(err)` à l'intérieur d'une fonction de d'interception de route ; + - L'erreur est capturée et traitée de manière asynchrone en appelant `next(err)` à l'intérieur d'une fonction d'interception de route ; - Une erreur est survenue pendant la résolution d'un composant asynchrone qui est requis pour faire le rendu d'une route. diff --git a/docs/fr/api/router-link.md b/docs/fr/api/router-link.md index f35a20fbb..e1b7a47d5 100644 --- a/docs/fr/api/router-link.md +++ b/docs/fr/api/router-link.md @@ -1,12 +1,12 @@ # `` -`` est le composant pour activer la navigation utilisateur dans une application où le routeur est activé. La localisation cible est spécifiée grâce à la prop `to`. Il est rendu en tant que balise `` avec le `href` correct par défaut, mais peut être configuré grâce à la prop `tag`. De plus, le lien se vera attribuer une classe CSS active lorsque la route cible est active. +`` est le composant pour activer la navigation utilisateur dans une application où le routeur est activé. La localisation cible est spécifiée grâce à la prop `to`. Il est rendu en tant que balise `` avec le `href` correct par défaut, mais peut être configuré grâce à la prop `tag`. De plus, le lien se verra attribuer une classe CSS active lorsque la route cible est active. `` est préféré par rapport au `` en dur dans le code pour les raisons suivantes : - Cela fonctionne de la même manière qu'on soit dans le mode historique HTML5 ou le mode hash, donc si vous avez décidé de changer de mode, ou alors que le routeur se replie sur le mode hash pour IE9, rien n'a besoin d'être changé. -- Dans le mode historique HTML5, `router-link` interceptera l'évènement du clic, comme ça le navigateur n'essaiera pas de rafraîchir la page. +- Dans le mode historique HTML5, `router-link` interceptera l'évènement du clic, comme ça le navigateur n'essaiera pas de rafraichir la page. - En utilisant l'option `base` dans le mode historique HTML5, vous n'avez pas besoin de l'inclure dans les props `to` des URL. @@ -18,10 +18,10 @@ - requis - Désigne la route cible du lien. Lorsqu'il est cliqué, la valeur de la prop `to` va être passée de manière interne à `router.push`, donc la valeur peut soit être une chaîne de caractères, ou alors un objet décrivant une localisation. + Désigne la route cible du lien. Lorsqu'il est cliqué, la valeur de la prop `to` va être passée de manière interne à `router.push`, donc la valeur peut soit être une chaine de caractères, ou alors un objet décrivant une localisation. ``` html - + Accueil Accueil @@ -29,10 +29,10 @@ Accueil - + Accueil - + Accueil @@ -42,6 +42,7 @@ S'enregistrer ``` + - **replace** - type : `boolean` @@ -54,6 +55,7 @@ ``` + - **append** - type : `boolean` @@ -66,13 +68,14 @@ ``` + - **tag** - type : `string` - défaut : `"a"` - Parfois, on veut que `` soit rendu avec une balise différente, ex : `
  • `. On peut alors utiliser la prop `tag` pour modifier la balise qui sera rendue, et elle écoutera toujours les évènements de clic pour la navigation + Parfois, on veut que `` soit rendu avec une balise différente, ex : `
  • `. On peut alors utiliser la prop `tag` pour modifier la balise qui sera rendue, et elle écoutera toujours les évènements de clic pour la navigation. ``` html foo @@ -80,6 +83,7 @@
  • foo
    • ``` + - **active-class** - type : `string` @@ -94,7 +98,7 @@ - défaut : `false` - Le comportement par défaut de la correspondance de classe active est une **correspondance inclusive**. Par exemple, `` vera cette classe appliquée tant que le chemin courant commencera par `/a/` ou `/a`. + Le comportement par défaut de la correspondance de classe active est une **correspondance inclusive**. Par exemple, `` verra cette classe appliquée tant que le chemin courant commencera par `/a/` ou `/a`. Une conséquence de cela est que `` sera actif pour toutes les routes ! Pour forcer le lien dans un « mode correspondance exacte », utilisez la prop `exact`. @@ -123,7 +127,7 @@ - défaut : `"router-link-exact-active"` - Configure la classe CSS active qui sera appliquée lorsqu'un lien sera actif avec une correspondance exact. Notez que la valeur par défaut peut aussi être configurée de manière globale via l'option `linkExactActiveClass` du constructeur du routeur. + Configure la classe CSS active qui sera appliquée lorsqu'un lien sera actif avec une correspondance exacte. Notez que la valeur par défaut peut aussi être configurée de manière globale via l'option `linkExactActiveClass` du constructeur du routeur. ### Appliquer la classe active à l'élément extérieur @@ -135,4 +139,4 @@ Parfois, on voudrait que la classe active soit appliquée à un élément extér ``` -Dans ce cas, `` sera le lien actuel (et récupérera le bon `href`), mais la classe active sera appliquée à l'élément extérieur `
  • `. +Dans ce cas, `` sera le lien actuel (et récupèrera le bon `href`), mais la classe active sera appliquée à l'élément extérieur `
  • `. diff --git a/docs/fr/api/router-view.md b/docs/fr/api/router-view.md index abce22d1d..619a2f8db 100644 --- a/docs/fr/api/router-view.md +++ b/docs/fr/api/router-view.md @@ -10,7 +10,7 @@ Le composant `` est un composant fonctionnel qui fait le rendu du c - défaut : `"default"` - Lorsqu'un `` a un nom, il fera le rendu du composant correspondant à ce nom dans les itinéraires de route correspondant à l'option `components`. Voir les [Routes nommées](../essentials/named-views.md) pour un example. + Lorsqu'un `` a un nom, il fera le rendu du composant correspondant à ce nom dans les itinéraires de route correspondant à l'option `components`. Voir les [Routes nommées](../essentials/named-views.md) pour un exemple. ### Comportement diff --git a/docs/fr/essentials/dynamic-matching.md b/docs/fr/essentials/dynamic-matching.md index 437c322b2..9f84d99c5 100644 --- a/docs/fr/essentials/dynamic-matching.md +++ b/docs/fr/essentials/dynamic-matching.md @@ -67,7 +67,7 @@ const User = { ### Motifs de concordance avancés -`vue-router` utilise [path-to-regexp](https://github.com/pillarjs/path-to-regexp) comme moteur de concordance de chemin, il supporte donc plusieurs motifs de concordance avancés tel que la présence optionnelle de segments dynamiques, aucun ou plusieurs motifs, plus d'options par motifs, et même des motifs d'expressions régulières personnalisés. Consultez cette [documentation](https://github.com/pillarjs/path-to-regexp#parameters) pour utiliser ces motifs avancés et [cet exemple](https://github.com/vuejs/vue-router/blob/dev/examples/route-matching/app.js) pour les utiliser avec `vue-router`. +`vue-router` utilise [path-to-regexp](https://github.com/pillarjs/path-to-regexp) comme moteur de concordance de chemin, il supporte donc plusieurs motifs de concordance avancés tels que la présence optionnelle de segments dynamiques, aucun ou plusieurs motifs, plus d'options par motifs, et même des motifs d'expressions régulières personnalisés. Consultez cette [documentation](https://github.com/pillarjs/path-to-regexp#parameters) pour utiliser ces motifs avancés et [cet exemple](https://github.com/vuejs/vue-router/blob/dev/examples/route-matching/app.js) pour les utiliser avec `vue-router`. ### Priorité de concordance diff --git a/docs/fr/essentials/history-mode.md b/docs/fr/essentials/history-mode.md index 96bdfd6ad..d4eb4ad5d 100644 --- a/docs/fr/essentials/history-mode.md +++ b/docs/fr/essentials/history-mode.md @@ -2,7 +2,7 @@ Le mode par défaut de `vue-router` est le _mode hash_. Il utilise la partie hash de l'URL pour simuler un URL complet et ainsi ne pas recharger la page quand l'URL change. -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 : +Pour nous passer du hash, nous pouvons utiliser le **mode historique** qui utilisera l'API `history.pushState` afin de permettre une navigation sans rechargement de page : ``` js const router = new VueRouter({ @@ -11,9 +11,9 @@ const router = new VueRouter({ }) ``` -Quand vous utilisez le mode historique, l'URL ressemblera a n'importe quel URL normal. Par ex. `http://oursite.com/user/id`. Magnifique ! +Quand vous utilisez le mode historique, l'URL ressemblera à n'importe quel URL normal. Par ex. `http://oursite.com/user/id`. Magnifique ! -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. +Cependant, un problème apparait si votre application est une application monopage cliente. Sans une configuration serveur adaptée, les utilisateurs tomberont sur une page d'erreur 404 en tentant d'accéder à `http://oursite.com/user/id` directement dans leur navigateur. Maintenant ça craint. 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 ! diff --git a/docs/fr/essentials/named-routes.md b/docs/fr/essentials/named-routes.md index 6780b0297..0dc5e668e 100644 --- a/docs/fr/essentials/named-routes.md +++ b/docs/fr/essentials/named-routes.md @@ -1,6 +1,6 @@ # Routes nommées -Parfois il est plus pratique d'identifer une route avec un nom, tout particulièrement quand on souhaite attacher cette route ou exécuter des actions de navigation. Vous pouvez donner un nom à une route dans les options `routes` pendant la création de l'instance du routeur : +Parfois il est plus pratique d'identifier une route avec un nom, tout particulièrement quand on souhaite attacher cette route ou exécuter des actions de navigation. Vous pouvez donner un nom à une route dans les options `routes` pendant la création de l'instance du routeur : ``` js const router = new VueRouter({ diff --git a/docs/fr/essentials/named-views.md b/docs/fr/essentials/named-views.md index c0c02af8a..ec25703f2 100644 --- a/docs/fr/essentials/named-views.md +++ b/docs/fr/essentials/named-views.md @@ -1,6 +1,6 @@ # Vues nommées -Parfois vous avez besoin d'afficher différentes vues en même temps plutôt que de les imbriquer, c.-à-d. créer un affichage avec une vue `sidebar` et une vue `main` par exemple. C'est ici que les routes nommées entre en jeu. Au lieu d'avoir une seule balise de vue, vous pouvez en avoir une multitude et donner à chacune d'entre elle un nom. Un `router-view` sans nom aura comme nom par défaut : `default`. +Parfois vous avez besoin d'afficher différentes vues en même temps plutôt que de les imbriquer, c.-à-d. créer un affichage avec une vue `sidebar` et une vue `main` par exemple. C'est ici que les routes nommées entrent en jeu. Au lieu d'avoir une seule balise de vue, vous pouvez en avoir une multitude et donner à chacune d'entre elles un nom. Un `router-view` sans nom aura comme nom par défaut : `default`. ``` html @@ -8,7 +8,7 @@ Parfois vous avez besoin d'afficher différentes vues en même temps plutôt que ``` -Une vue est rendue en utilisant un composant, donc de multiples vues nécessites de multiples composants pour une même route. Assurez-vous d'utiliser l'option `components` (avec un s) : +Une vue est rendue en utilisant un composant, donc de multiples vues nécessitent de multiples composants pour une même route. Assurez-vous d'utiliser l'option `components` (avec un s) : ``` js const router = new VueRouter({ diff --git a/docs/fr/essentials/navigation.md b/docs/fr/essentials/navigation.md index 851ce7d92..aa482f37e 100644 --- a/docs/fr/essentials/navigation.md +++ b/docs/fr/essentials/navigation.md @@ -14,10 +14,10 @@ Cette méthode est appelée en interne quand vous cliquez sur ``, d |-------------|--------------| | `` | `router.push(...)` | -L'argument peut être une chaîne de caractère représentant un chemin, ou un objet de description de destination. Des exemples : +L'argument peut être une chaine de caractère représentant un chemin, ou un objet de description de destination. Des exemples : ``` js -// chaîne de caractère représentant un chemin +// chaine de caractère représentant un chemin router.push('home') // objet @@ -36,7 +36,7 @@ router.push({ path: 'register', query: { plan: 'private' }}) const userId = 123 router.push({ name: 'user', params: { userId }}) // -> /user/123 router.push({ path: `/user/${userId}` }) // -> /user/123 -// Ceci ne vas PAS fonctionner +// Ceci ne va PAS fonctionner router.push({ path: '/user', params: { userId }}) // -> /user ``` @@ -54,9 +54,10 @@ Il agit comme `router.push`. La seule différence est que la navigation se fait |-------------|--------------| | `` | `router.replace(...)` | + #### `router.go(n)` -Cette méthode prend un seul nombre en tant que paramètre. Celui-ci indique de combien d'entrée vers l'avant ou vers l'arrière il faut naviguer dans la pile de l'historique, de la même manière qu'avec `window.history.go(n)`. +Cette méthode prend un seul nombre en tant que paramètre. Celui-ci indique de combien d'entrées vers l'avant ou vers l'arrière il faut naviguer dans la pile de l'historique, de la même manière qu'avec `window.history.go(n)`. Des exemples @@ -77,7 +78,7 @@ router.go(100) #### Manipulation de l'historique -Vous avez peut être remarqué que `router.push`, `router.replace` et `router.go` sont des équivalent de [`window.history.pushState`, `window.history.replaceState` et `window.history.go`](https://developer.mozilla.org/fr-FR/docs/Web/API/History), et qu'ils imitent les APIs de `window.history`. +Vous avez peut être remarqué que `router.push`, `router.replace` et `router.go` sont des équivalents de [`window.history.pushState`, `window.history.replaceState` et `window.history.go`](https://developer.mozilla.org/fr-FR/docs/Web/API/History), et qu'ils imitent les APIs de `window.history`. Donc, si vous utilisez déjà l'[API History des navigateurs](https://developer.mozilla.org/fr-FR/docs/Web/API/History_API), manipuler l'historique sera très simple avec vue-router. diff --git a/docs/fr/essentials/nested-routes.md b/docs/fr/essentials/nested-routes.md index da8142896..be0fc9cfb 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'URL correspondent à une certaine structure de composants imbriqués, par exemple : +Les vraies 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,11 +73,11 @@ 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 un URL imbriqué.** +**Notez que les chemins imbriqués commençants 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. -À ce niveau, avec la configuration ci-dessus, quand vous visitez `/utilisateur/foo`, rien ne sera rendu dans la partie `User`, car aucune sous route ne concorde. Peut-être voudriez vous afficher quelque chose ici. Dans ce cas, vous pouvez fournir une sous route vide : +À ce niveau, avec la configuration ci-dessus, quand vous visitez `/utilisateur/foo`, rien ne sera rendu dans la partie `User`, car aucune sous route ne concorde. Peut-être voudriez-vous afficher quelque chose ici. Dans ce cas, vous pouvez fournir une sous route vide : ``` js const router = new VueRouter({ diff --git a/docs/fr/essentials/passing-props.md b/docs/fr/essentials/passing-props.md index 15f0ba81d..e77d77308 100644 --- a/docs/fr/essentials/passing-props.md +++ b/docs/fr/essentials/passing-props.md @@ -72,4 +72,4 @@ L'URL `/search?q=vue` passerait `{query: 'vue'}` comme `props` au composant `Sea 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. -Pour une utilisation avancée, jettez un œil à cet [exemple](https://github.com/vuejs/vue-router/blob/dev/examples/route-props/app.js). +Pour une utilisation avancée, jetez 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 78a2006d3..0a791ee51 100644 --- a/docs/fr/essentials/redirect-and-alias.md +++ b/docs/fr/essentials/redirect-and-alias.md @@ -41,7 +41,7 @@ Pour d'autres utilisations avancées, jetez un œil à cet [exemple](https://git 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`.** +** Un alias de `/a` en tant que `/b` signifie que lorsque l'utilisateur va visiter `/b`, l'URL va rester `/b`, mais la concordance va se faire comme si l'utilisateur visitait `/a`.** La phase du dessus peut être exprimée dans la configuration de la route de la manière suivante : From 8fc6264cf587a5c36c42fa3dfb1956680bfbf39c Mon Sep 17 00:00:00 2001 From: Bruno Lesieur Date: Mon, 2 Oct 2017 09:05:35 +0200 Subject: [PATCH 06/14] @posva review Signed-off-by: Bruno Lesieur --- docs/fr/api/options.md | 2 +- docs/fr/api/router-instance.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/fr/api/options.md b/docs/fr/api/options.md index 3cc6f78a5..f37e16530 100644 --- a/docs/fr/api/options.md +++ b/docs/fr/api/options.md @@ -89,7 +89,7 @@ - type : `Function` - Permets de spécifier des fonctions personnalisées pour formater en objet ou en chaîne de caractères la requête. Surcharge les fonctions par défaut. + Permettent de spécifier des fonctions personnalisées pour formater en objet ou en chaîne de caractères la requête. Surcharge les fonctions par défaut. ### fallback diff --git a/docs/fr/api/router-instance.md b/docs/fr/api/router-instance.md index 73a017510..43498fc98 100644 --- a/docs/fr/api/router-instance.md +++ b/docs/fr/api/router-instance.md @@ -63,7 +63,7 @@ > 2.2.0+ - Permets d'ajouter dynamiquement des routes au routeur. L'argument doit être un tableau utilisant le même format de configuration que l'option `routes` du constructeur. + Permet d'ajouter dynamiquement des routes au routeur. L'argument doit être un tableau utilisant le même format de configuration que l'option `routes` du constructeur. - **router.onReady(callback, [errorCallback])** From 92e22ed3d388b8c5a6d2afd3dfe5b2ef9930b463 Mon Sep 17 00:00:00 2001 From: Bruno Lesieur Date: Sat, 21 Oct 2017 16:33:28 +0200 Subject: [PATCH 07/14] Update documentation with version 2.5 Signed-off-by: Bruno Lesieur --- docs/fr/SUMMARY.md | 6 ++--- docs/fr/advanced/navigation-guards.md | 25 ++++++++++++++++++-- docs/fr/advanced/scroll-behavior.md | 20 +++++++++++++++- docs/fr/api/options.md | 9 +++++-- docs/fr/essentials/getting-started.md | 23 ++++++++++++++++++ docs/fr/essentials/history-mode.md | 30 +++++++++++++++++++----- docs/fr/essentials/redirect-and-alias.md | 2 ++ 7 files changed, 101 insertions(+), 14 deletions(-) diff --git a/docs/fr/SUMMARY.md b/docs/fr/SUMMARY.md index c601ba47b..8b87aaab3 100644 --- a/docs/fr/SUMMARY.md +++ b/docs/fr/SUMMARY.md @@ -1,7 +1,7 @@ # vue-router 2 - -> 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). - + +> Note aux utilisateurs de TypeScript : vue-router@3.0+ nécessite vue@2.5+, et inverssement. + **[Notes de version](https://github.com/vuejs/vue-router/releases)** - [Installation](installation.md) diff --git a/docs/fr/advanced/navigation-guards.md b/docs/fr/advanced/navigation-guards.md index 4937bb1ae..b420d7a8a 100644 --- a/docs/fr/advanced/navigation-guards.md +++ b/docs/fr/advanced/navigation-guards.md @@ -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()`. @@ -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 diff --git a/docs/fr/advanced/scroll-behavior.md b/docs/fr/advanced/scroll-behavior.md index 5e14fd67a..7afe3dd45 100644 --- a/docs/fr/advanced/scroll-behavior.md +++ b/docs/fr/advanced/scroll-behavior.md @@ -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` : @@ -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 fournissont simplement ce code primitif pour permettre aux utilisateurs de faire les implémentations spécifiques. diff --git a/docs/fr/api/options.md b/docs/fr/api/options.md index f37e16530..ef61bf779 100644 --- a/docs/fr/api/options.md +++ b/docs/fr/api/options.md @@ -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 ``` Pour plus de détails, voir [Comportement du Scroll](../advanced/scroll-behavior.md). diff --git a/docs/fr/essentials/getting-started.md b/docs/fr/essentials/getting-started.md index 4dee272f9..9251c30ee 100644 --- a/docs/fr/essentials/getting-started.md +++ b/docs/fr/essentials/getting-started.md @@ -64,6 +64,29 @@ const app = new Vue({ // L'application est maintenant en marche ! ``` +En injectant le routeur, nous avons y avons accès à travers `this.$router` ainsi qu'à 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. + 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 `` 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 --git a/docs/fr/essentials/history-mode.md b/docs/fr/essentials/history-mode.md index d4eb4ad5d..37b9d2584 100644 --- a/docs/fr/essentials/history-mode.md +++ b/docs/fr/essentials/history-mode.md @@ -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) }) ``` @@ -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 : diff --git a/docs/fr/essentials/redirect-and-alias.md b/docs/fr/essentials/redirect-and-alias.md index 0a791ee51..b1d6d9619 100644 --- a/docs/fr/essentials/redirect-and-alias.md +++ b/docs/fr/essentials/redirect-and-alias.md @@ -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 From ca8a1145f5e51283aa6a70ebfbbbb3d15e5c86ec Mon Sep 17 00:00:00 2001 From: Bruno Lesieur Date: Sat, 21 Oct 2017 16:39:39 +0200 Subject: [PATCH 08/14] Little fixes Signed-off-by: Bruno Lesieur --- docs/fr/advanced/scroll-behavior.md | 2 +- docs/fr/essentials/getting-started.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/fr/advanced/scroll-behavior.md b/docs/fr/advanced/scroll-behavior.md index 7afe3dd45..546c51619 100644 --- a/docs/fr/advanced/scroll-behavior.md +++ b/docs/fr/advanced/scroll-behavior.md @@ -77,4 +77,4 @@ scrollBehavior (to, from, savedPosition) { } ``` -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 fournissont simplement ce code primitif pour permettre aux utilisateurs de faire les implémentations spécifiques. +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 --git a/docs/fr/essentials/getting-started.md b/docs/fr/essentials/getting-started.md index 9251c30ee..e5f612e5a 100644 --- a/docs/fr/essentials/getting-started.md +++ b/docs/fr/essentials/getting-started.md @@ -64,7 +64,7 @@ const app = new Vue({ // L'application est maintenant en marche ! ``` -En injectant le routeur, nous avons y avons accès à travers `this.$router` ainsi qu'à la route courante derrière `this.$route` depuis n'importe quel composant : +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 From c18e1366bf619b6985f62822f18f6212f91e57fc Mon Sep 17 00:00:00 2001 From: Bruno Lesieur Date: Mon, 23 Oct 2017 21:53:03 +0200 Subject: [PATCH 09/14] Add + to version Signed-off-by: Bruno Lesieur --- docs/en/SUMMARY.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/en/SUMMARY.md b/docs/en/SUMMARY.md index affd20616..3fb1abf3a 100644 --- a/docs/en/SUMMARY.md +++ b/docs/en/SUMMARY.md @@ -1,6 +1,6 @@ # vue-router 2 -> Note: for TypeScript users, vue-router@3.0 requires vue@2.5, and vice versa. +> Note: for TypeScript users, vue-router@3.0+ requires vue@2.5+, and vice versa. **[Release Notes](https://github.com/vuejs/vue-router/releases)** From e3e1eeac9c04e942f88be6756279651e9a09d9a6 Mon Sep 17 00:00:00 2001 From: Bruno Lesieur Date: Tue, 24 Oct 2017 13:27:37 +0200 Subject: [PATCH 10/14] Little french fix Signed-off-by: Bruno Lesieur --- docs/fr/essentials/passing-props.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/fr/essentials/passing-props.md b/docs/fr/essentials/passing-props.md index e77d77308..814f41f04 100644 --- a/docs/fr/essentials/passing-props.md +++ b/docs/fr/essentials/passing-props.md @@ -4,7 +4,7 @@ Utiliser `$route` dans vos composants crée un couplage fort à la route qui va Pour découpler un composant de son routeur, utilisez les props : -**❌ Couplé avec `$route`** +**Plutôt que de coupler avec `$route`** ``` js const User = { @@ -17,7 +17,7 @@ const router = new VueRouter({ }) ``` -**👍 Découplé avec les `props`** +**Découplez avec les `props`** ``` js const User = { From b8791c897356cb3baeca6e339127f7e8012d2f7b Mon Sep 17 00:00:00 2001 From: Bruno Lesieur Date: Thu, 30 Nov 2017 09:20:40 +0100 Subject: [PATCH 11/14] Typo fix Signed-off-by: Bruno Lesieur --- docs/fr/essentials/passing-props.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/fr/essentials/passing-props.md b/docs/fr/essentials/passing-props.md index 814f41f04..e1a27486f 100644 --- a/docs/fr/essentials/passing-props.md +++ b/docs/fr/essentials/passing-props.md @@ -26,7 +26,7 @@ const User = { } const router = new VueRouter({ routes: [ - { path: '/utilisateur/:id', component: User, props: true } + { 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 : { From 7a97f732828a48c58d7ac6c4b08c5862c6cee80f Mon Sep 17 00:00:00 2001 From: MachinisteWeb Date: Mon, 29 Jan 2018 14:25:29 +0100 Subject: [PATCH 12/14] 2018 jan-fev update Signed-off-by: MachinisteWeb --- docs/fr/advanced/navigation-guards.md | 2 +- docs/fr/essentials/history-mode.md | 10 ++--- docs/fr/essentials/named-views.md | 58 +++++++++++++++++++++++++++ 3 files changed, 64 insertions(+), 6 deletions(-) diff --git a/docs/fr/advanced/navigation-guards.md b/docs/fr/advanced/navigation-guards.md index b420d7a8a..1b686c0e8 100644 --- a/docs/fr/advanced/navigation-guards.md +++ b/docs/fr/advanced/navigation-guards.md @@ -32,7 +32,7 @@ Chaque fonction d'interception reçoit trois arguments : - **`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()`. + - **`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 enregistrées via [`router.onError()`](../api/router-instance.html#methods). **Assurez-vous de toujours appeler la fonction `next`, sinon le hook ne sera jamais résolu.** diff --git a/docs/fr/essentials/history-mode.md b/docs/fr/essentials/history-mode.md index 37b9d2584..1d803e14b 100644 --- a/docs/fr/essentials/history-mode.md +++ b/docs/fr/essentials/history-mode.md @@ -80,11 +80,11 @@ Pour Node.js avec Express, vous pouvez utiliser le [middleware connect-history-a - - - - - + + + + + diff --git a/docs/fr/essentials/named-views.md b/docs/fr/essentials/named-views.md index ec25703f2..53819f57e 100644 --- a/docs/fr/essentials/named-views.md +++ b/docs/fr/essentials/named-views.md @@ -26,3 +26,61 @@ const router = new VueRouter({ ``` Une démo de cet exemple peut-être trouvée [ici](https://jsfiddle.net/posva/6du90epg/). + +## Vues nommées imbriquées + +Il est possible de créer des dispositions complexes en utilisant les vues nommées avec les vues imbriquées. Quand vous le faites, vous devez nommer les composants imbriqués de `router-view` utilisés. Voyons cela avec un panneau de configuration exemple : + +``` +/parametres/emails /parametres/profile ++-----------------------------------+ +------------------------------+ +| UserSettings | | UserSettings | +| +-----+-------------------------+ | | +-----+--------------------+ | +| | Nav | UserEmailsSubscriptions | | +------------> | | Nav | UserProfile | | +| | +-------------------------+ | | | +--------------------+ | +| | | | | | | | UserProfilePreview | | +| +-----+-------------------------+ | | +-----+--------------------+ | ++-----------------------------------+ +------------------------------+ +``` + +- `Nav` est juste un composant standard. +- `UserSettings` est un composant de vue. +- `UserEmailsSubscriptions`, `UserProfile`, `UserProfilePreview` sont des composants de vue imbriqués. + +**Note** : _mettons de côté la partie HTML / CSS de cette disposition et concentrons nous sur le composant utilisé en lui-même._ + +La section `