diff --git a/README.md b/README.md index cfb5d4ae5..6947a2b8c 100644 --- a/README.md +++ b/README.md @@ -1,65 +1,32 @@ -# vue-router [![Build Status](https://img.shields.io/circleci/project/vuejs/vue-router/dev.svg)](https://circleci.com/gh/vuejs/vue-router) +# Pour traduire la documentation de vue-router -> This is vue-router 2.0 which works only with Vue 2.0. For the 1.x router see the [1.0 branch](https://github.com/vuejs/vue-router/tree/1.0). +### Workflow de travail -### Introduction +Cette branche de travail `working` est volontairement mise en avant et doit uniquement être mise à jour dans le sens : -`vue-router` is the official router for [Vue.js](http://vuejs.org). It deeply integrates with Vue.js core to make building Single Page Applications with Vue.js a breeze. Features include: +`vuejs/vue-router:dev` --> `vuejs-fr/vue-router:working`. -- Nested route/view mapping -- Modular, component-based router configuration -- Route params, query, wildcards -- View transition effects powered by Vue.js' transition system -- Fine-grained navigation control -- Links with automatic active CSS classes -- HTML5 history mode or hash mode, with auto-fallback in IE9 -- Customizable Scroll Behavior +Nous traduisons les fichiers directement dans le dossier `en` sans les renommer. Cela permet lors de la mise à jour de la documentation via l'utilisation des commandes : -Get started with the [documentation](http://vuejs.github.io/vue-router), or play with the [examples](https://github.com/vuejs/vue-router/tree/dev/examples) (see how to run them below). - -### Development Setup - -``` bash -# install deps -npm install - -# build dist files -npm run build - -# serve examples at localhost:8080 -npm run dev - -# lint & run all tests -npm test - -# serve docs at localhost:8080 -npm run docs +``` +git fetch upstream +git merge working upstream/master ``` -## Questions - -For questions and support please use the [Discord chat server](https://chat.vuejs.org) or [the official forum](http://forum.vuejs.org). The issue list of this repo is **exclusively** for bug reports and feature requests. - -## Issues - -Please make sure to read the [Issue Reporting Checklist](https://github.com/vuejs/vue/blob/dev/.github/CONTRIBUTING.md#issue-reporting-guidelines) before opening an issue. Issues not conforming to the guidelines may be closed immediately. - -## Contribution - -Please make sure to read the [Contributing Guide](https://github.com/vuejs/vue/blob/dev/.github/CONTRIBUTING.md) before making a pull request. - -## Changelog +d'obtenir des conflits **sur les pages déjà traduites** et ainsi maintenir la documentation à jour en fonction des modifications à travers **les documents déjà traduits**. -Details changes for each release are documented in the [release notes](https://github.com/vuejs/vue-router/releases). +Note : `git remote add upstream https://github.com/vuejs/vue-router.git` est nécessaire au préalable pour utiliser les commandes ci-dessus. -## Stay In Touch +### Traduction -- For latest releases and announcements, follow on Twitter: [@vuejs](https://twitter.com/vuejs) +Pour savoir ce qui est [en cours de traduction](https://github.com/vuejs-fr/vue-router/issues/1) ou [comment traduire un fichier](https://github.com/vuejs-fr/vue-router/issues/2), référez vous aux issues correspondantes. -## License +### Reverssement -[MIT](http://opensource.org/licenses/MIT) +Quand un fichier traduit est validé par pull request, on le met à jour dans le dossier `fr` de `vuejs-fr/vue-router:dev` puis on propose une pull request au site principal : -Copyright (c) 2013-present Evan You +`vuejs-fr/vue-router:dev` --> `vuejs/vue-router:dev` +ainsi le dossier officiel hébergeant la documentation possède bien le dossier `fr` en français et le dossier `en` en anglais. +Note : il peut être intéressant de faire une pull request par ficher validé et donc de créer une branche dérivée de `vuejs-fr/vue-router:dev` pour faire la pull request (`vuejs-fr/vue-router:dev` --> `vuejs-fr/vue-router:only_one_changed_file_from_master` --> `vuejs/vue-router:dev`) diff --git a/docs-gitbook/de/README.md b/docs-gitbook/de/README.md deleted file mode 120000 index 0fbb5a869..000000000 --- a/docs-gitbook/de/README.md +++ /dev/null @@ -1 +0,0 @@ -SUMMARY.md \ No newline at end of file diff --git a/docs-gitbook/de/README.md b/docs-gitbook/de/README.md new file mode 100644 index 000000000..0fbb5a869 --- /dev/null +++ b/docs-gitbook/de/README.md @@ -0,0 +1 @@ +SUMMARY.md \ No newline at end of file diff --git a/docs-gitbook/fr/SUMMARY.md b/docs-gitbook/fr/SUMMARY.md index 3fa9be3f1..a27bc050d 100644 --- a/docs-gitbook/fr/SUMMARY.md +++ b/docs-gitbook/fr/SUMMARY.md @@ -1,6 +1,6 @@ # vue-router -> Note aux utilisateurs de TypeScript : vue-router@3.0+ nécessite vue@2.5+, et inverssement. +> Note aux utilisateurs de TypeScript : vue-router@3.0+ nécessite vue@2.5+, et inversement. **[Notes de version](https://github.com/vuejs/vue-router/releases)** diff --git a/docs-gitbook/fr/api/router-instance.md b/docs-gitbook/fr/api/router-instance.md index 43498fc98..73a017510 100644 --- a/docs-gitbook/fr/api/router-instance.md +++ b/docs-gitbook/fr/api/router-instance.md @@ -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])** diff --git a/docs/en/SUMMARY.md b/docs/en/SUMMARY.md new file mode 100644 index 000000000..a27bc050d --- /dev/null +++ b/docs/en/SUMMARY.md @@ -0,0 +1,41 @@ +# vue-router + +> Note aux utilisateurs de TypeScript : vue-router@3.0+ nécessite vue@2.5+, et inversement. + +**[Notes de version](https://github.com/vuejs/vue-router/releases)** + +- [Installation](installation.md) +- Essentiel + - [Pour commencer](essentials/getting-started.md) + - [Concordance dynamique de route](essentials/dynamic-matching.md) + - [Navigation programmatique](essentials/navigation.md) + - [Routes imbriquées](essentials/nested-routes.md) + - [Routes nommées](essentials/named-routes.md) + - [Vues nommées](essentials/named-views.md) + - [Redirection et alias](essentials/redirect-and-alias.md) + - [Passage de props aux composants de route](essentials/passing-props.md) + - [Mode historique de HTML5](essentials/history-mode.md) +- Avancé + - [Intercepteurs de navigation](advanced/navigation-guards.md) + - [Champs meta de route](advanced/meta.md) + - [Transitions](advanced/transitions.md) + - [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éférence de l'API + - [Options de construction du routeur](api/options.md) + - [routes](api/options.md#routes) + - [mode](api/options.md#mode) + - [base](api/options.md#base) + - [linkActiveClass](api/options.md#linkactiveclass) + - [linkExactActiveClass](api/options.md#linkexactactiveclass) + - [scrollBehavior](api/options.md#scrollbehavior) + - [parseQuery / stringifyQuery](api/options.md#parsequery--stringifyquery) + - [fallback](api/options.md#fallback) + - [L'instance du routeur](api/router-instance.md) + - [Propriétés](api/router-instance.md#propriétés) + - [Méthodes](api/router-instance.md#méthodes) + - [L'objet Route](api/route-object.md) + - [Injections de composant](api/component-injections.md) + - [router-link](api/router-link.md) + - [router-view](api/router-view.md) diff --git a/docs/en/api/component-injections.md b/docs/en/api/component-injections.md new file mode 100644 index 000000000..c9f020a8b --- /dev/null +++ b/docs/en/api/component-injections.md @@ -0,0 +1,21 @@ +# Injections de composant + +### Propriétés injectées + +Ces propriétés sont injectées dans chacun des composants enfants, en passant l'instance du routeur à l'application racine de Vue en tant qu'option `router`. + +- #### $router + + L'instance du routeur. + +- #### $route + + La [Route](route-object.md) actuellement active. C'est une propriété en lecture seule et ses propriétés sont immutables, mais elles restent malgré tout observables. + +### Options activées + +- **beforeRouteEnter** +- **beforeRouteUpdate** (ajouté en 2.2) +- **beforeRouteLeave** + + Voir l'[interception par composant](../advanced/navigation-guards.md#securisation-par-composant). diff --git a/docs/en/api/options.md b/docs/en/api/options.md new file mode 100644 index 000000000..ef61bf779 --- /dev/null +++ b/docs/en/api/options.md @@ -0,0 +1,107 @@ +# Options de construction du routeur + +### routes + +- type: `Array` + + Déclaration de type pour `RouteConfig` : + + ``` js + declare type RouteConfig = { + path: string; + component?: Component; + name?: string; // pour les routes nommées + components?: { [name: string]: Component }; // pour les vues nommées + redirect?: string | Location | Function; + props?: boolean | string | Function; + alias?: string | Array; + children?: Array; // pour les routes imbriquées + beforeEnter?: (to: Route, from: Route, next: Function) => void; + meta?: any; + + // 2.6.0+ + caseSensitive?: boolean; // use case sensitive match? (default: false) + pathToRegexpOptions?: Object; // path-to-regexp options for compiling regex + } + ``` + +### mode + +- type : `string` + +- défaut : `"hash" (dans le navigateur) | "abstract" (en Node.js)` + +- valeurs disponibles : `"hash" | "history" | "abstract"` + + Configure le mode du routeur. + + - `hash` : utilise le hash de l'URL pour le routage. Fonctionne dans tous les navigateurs supportés par Vue, ainsi que ceux qui ne supportent pas l'API History d'HTML5. + + - `history` : nécessite l'API History d'HTML 5 et la configuration du serveur. Voir [Mode historique de HTML5](../essentials/history-mode.md). + + - `abstract` : fonctionne dans tous les environnements JavaScript, ex. côté serveur avec Node.js. **Le routeur sera automatiquement forcé d'utiliser ce mode si aucune API navigateur n'est présente.** + +### base + +- type : `string` + +- défaut : `"/"` + + L'URL de base de l'application. Par exemple, si l'application monopage entière est distribuée sous `/app/`, alors `base` doit utiliser la valeur `"/app/"`. + +### linkActiveClass + +- type : `string` + +- défaut : `"router-link-active"` + + Configure de manière globale la classe active par défaut de ``. Voir aussi [router-link](router-link.md). + +### linkExactActiveClass + +> 2.5.0+ + +- type : `string` + +- default : `"router-link-exact-active"` + + 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 + +- type : `Function` + + Signature : + + ``` + type PositionDescriptor = + { x: number, y: number } | + { selector: string } | + ?{} + + type scrollBehaviorHandler = ( + to: Route, + from: Route, + savedPosition?: { x: number, y: number } + ) => PositionDescriptor | Promise + ``` + + Pour plus de détails, voir [Comportement du Scroll](../advanced/scroll-behavior.md). + +### parseQuery / stringifyQuery + +> 2.4.0+ + +- type : `Function` + + 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 + +> 2.6.0+ + +- type : `boolean` + + 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 rendue côté serveur et à besoin de fonctionner dans IE9, car le mode hash ne fonctionne pas avec du SSR. diff --git a/docs/en/api/route-object.md b/docs/en/api/route-object.md new file mode 100644 index 000000000..bdf566514 --- /dev/null +++ b/docs/en/api/route-object.md @@ -0,0 +1,93 @@ +# L'objet `Route` + +Un **objet `Route`** représente l'état actuel de la route active. Il contient des informations analysées à propos de l'URL courant et **les itinéraires de route** appariés par l'URL. + +L'objet `Route` est immutable. Chaque navigation qui se déroule avec succès résultera en un nouvel objet `Route`. + +L'objet `Route` peut être trouvé à plusieurs endroits : + +- À l'intérieur des composants en tant que `this.$route` + +- À l'intérieur des fonctions de rappel des observateurs de `$route` + +- Comme valeur de retour après l'appel de `router.match(location)` + +- À l'intérieur des fonctions d'interception de la navigation, dans les deux premiers paramètres de la fonction : + + ``` js + router.beforeEach((to, from, next) => { + // `to` et `from` sont tous les deux des objets Route + }) + ``` + +- À l'intérieur de la fonction `scrollBehavior` dans les deux premiers arguments : + + ``` js + const router = new VueRouter({ + scrollBehavior (to, from, savedPosition) { + // `to` et `from` sont tous les deux des objets Route + } + }) + ``` + +### Propriétés de l'objet `Route` + +- **$route.path** + + - type : `string` + + 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** + + - type : `Object` + + Un objet qui contient des pairs clé/valeur de segments dynamiques et segments *star*. S'il n'y a pas de paramètres, alors la valeur sera un objet vide. + +- **$route.query** + + - type : `Object` + + 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 chaine de caractères vide. + +- **$route.fullPath** + + - type : `string` + + L'URL entièrement résolu, incluant la requête et le hash. + +- **$route.matched** + + - type : `Array` + + Un `Array` contenant les **les itinéraires de la route** pour chaque segment de chemin imbriqué de la route courante. Les itinéraires de la route sont des copies des objets dans le tableau de configuration `routes` (et dans les tableaux `children`). + + ``` js + const router = new VueRouter({ + routes: [ + // l'objet qui suit est un itinéraire de route + { path: '/foo', component: Foo, + children: [ + // c'est aussi un itinéraire + { path: 'bar', component: Bar } + ] + } + ] + }) + ``` + + Lorsque l'URL sera `/foo/bar`, `$route.matched` sera un `Array` contenant les deux objets (clonés), dans l'ordre parent à l'enfant. + +- **$route.name** + + Le nom de la route courante, si elle en a un. (Voir [Routes nommées](../essentials/named-routes.md)). + +- **$route.redirectedFrom** + + Le nom de la route d'où la page a été redirigée, si elle en a un. (Voir [Redirection et alias](../essentials/redirect-and-alias.md)). diff --git a/docs/en/api/router-instance.md b/docs/en/api/router-instance.md new file mode 100644 index 000000000..43498fc98 --- /dev/null +++ b/docs/en/api/router-instance.md @@ -0,0 +1,88 @@ +# L'instance du routeur + +### Propriétés + +#### router.app + +- type: `instance de Vue` + + L'instance racine de Vue dans laquelle l'instance de `routeur` a été injectée. + +#### router.mode + +- type: `string` + + Le [mode](options.md#mode) que le routeur utilise. + +#### router.currentRoute + +- type: `Route` + + La route actuelle représentée en tant qu'un [objet route](route-object.md). + +### Méthodes + +- **router.beforeEach(guard)** +- **router.beforeResolve(guard)** (2.5.0+) +- **router.afterEach(hook)** + + Ajout des interceptions globales de navigation. Voir les [Intercepteurs de navigation](../advanced/navigation-guards.md). + + Dans la version 2.5.0+, ces trois méthodes retournent une fonction qui enlève les fonctions d'interception et hooks enregistrés. + +- **router.push(location, onComplete?, onAbort?)** +- **router.replace(location, onComplete?, onAbort?)** +- **router.go(n)** +- **router.back()** +- **router.forward()** + + Navigue à une nouvelle URL de façon programmée. Voir [Navigation de façon programmée](../essentials/navigation.md). + +- **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. + +- **router.resolve(location, current?, append?)** + + > 2.1.0+ + + Inverse la résolution d'URL. La `location` doit avoir la même forme qu'utilisée dans ``, retourne un objet avec les propriétés suivantes : + + ``` js + { + location: Location; + route: Route; + href: string; + } + ``` + + - `current` is the current Route by default (most of the time you don't need to change this) + - `append` allows you to append the path to the `current` route (as with [`router-link`](router-link.md#props)) + +- **router.addRoutes(routes)** + + > 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. + +- **router.onReady(callback, [errorCallback])** + + > 2.2.0+ + + Cette méthode met en file d'attente une fonction de rappel qui sera appelée lorsque le routeur aura complété la navigation initiale, ce qui signifie qu'il a résolu tous les hooks d'entrées asynchrones et composants asynchrones qui sont associés à la route initiale. + + 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é). + +- **router.onError(callback)** + + > 2.4.0+ + + Enregistre une fonction de rappel qui sera appelée lorsqu'une erreur sera capturée pendant la navigation vers une route. Notez que pour qu'une erreur soit appelée, cela doit correspondre à l'un des scénarios suivants : + + - 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 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/en/api/router-link.md b/docs/en/api/router-link.md new file mode 100644 index 000000000..e1b7a47d5 --- /dev/null +++ b/docs/en/api/router-link.md @@ -0,0 +1,142 @@ +# `` + +`` 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 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. + +### Props + +- **to** + + - type : `string | Location` + + - 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 chaine de caractères, ou alors un objet décrivant une localisation. + + ``` html + + Accueil + + Accueil + + + Accueil + + + Accueil + + + Accueil + + + Utilisateur + + + S'enregistrer + ``` + + +- **replace** + + - type : `boolean` + + - défaut : `false` + + Configurer la prop `replace` appellera `router.replace()` au lieu de `router.push()` lors du clic, comme ça, la navigation ne laissera pas un enregistrement dans l'historique. + + ``` html + + ``` + + +- **append** + + - type : `boolean` + + - défaut : `false` + + Configurer la propriété `append` suffixe toujours le chemin relatif au chemin courant. Par exemple, assumons que nous naviguons de `/a` à un lien relatif `b`, sans `append` on finira sur `/b`, mais avec `append` on finira sur `/a/b`. + + ``` html + + ``` + + +- **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. + + ``` html + foo + +
  • foo
    • + ``` + + +- **active-class** + + - type : `string` + + - défaut : `"router-link-active"` + + Configure la classe CSS active qui sera appliquée lorsque le lien sera actif. Notez que la valeur par défaut peut aussi être configurée de manière globale via l'option `linkActiveClass` du constructeur du routeur. + +- **exact** + + - type : `boolean` + + - défaut : `false` + + 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`. + + ``` html + + + ``` + + Allez voir les exemples expliquant la classe active pour les liens [ici](https://jsfiddle.net/8xrk1n9f/). + +- **event** + + > 2.1.0+ + + - type : `string | Array` + + - défaut : `'click'` + + Spécifie les évènement(s) que peu(ven)t lancer la navigation de lien. + +- **exact-active-class** + + > 2.5.0+ + + - type : `string` + + - défaut : `"router-link-exact-active"` + + 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 + +Parfois, on voudrait que la classe active soit appliquée à un élément extérieur au lieu de l'élément `` lui-même, dans ce cas, vous pouvez faire le rendu de cet élément extérieur en utilisant `` et en entourant le tag `` : + +``` html + + /foo + +``` + +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/en/api/router-view.md b/docs/en/api/router-view.md new file mode 100644 index 000000000..619a2f8db --- /dev/null +++ b/docs/en/api/router-view.md @@ -0,0 +1,27 @@ +# `` + +Le composant `` est un composant fonctionnel qui fait le rendu du composant correspondant au chemin donné. Les composants rendus dans `` peuvent aussi contenir leur propre ``, qui fera le rendu des composants pour les chemins imbriqués. + +### Props + +- **name** + + - type : `string` + + - 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 exemple. + +### Comportement + +Les propriétés sans nom seront passées le long du composant rendu, toutefois la plupart du temps, les données par route seront contenues dans les paramètres de la route. + +Car c'est juste un composant, il fonctionne avec `` et ``. Lorsque vous utilisez les deux ensemble, soyez sûr d'utiliser ` à l'intérieur : + +``` html + + + + + +``` diff --git a/docs/guide/README.md b/docs/guide/README.md index a6e87ca0a..d2706c5fd 100644 --- a/docs/guide/README.md +++ b/docs/guide/README.md @@ -1,14 +1,14 @@ -# Getting Started +# Pour commencer ::: tip Note -We will be using [ES2015](https://github.com/lukehoban/es6features) in the code samples in the guide. +Nous utiliserons [ES2015](https://github.com/lukehoban/es6features) dans les exemples de code dans ce guide. -Also, all examples will be using the full version of Vue to make on-the-fly template compilation possible. See more details [here](https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only). +Tous les exemples utiliseront la version complète de Vue pour rendre l'analyse de template possible. Plus de détails [ici](https://fr.vuejs.org/guide/installation.html#Runtime-Compiler-vs-Runtime-seul). ::: -Creating a Single-page Application with Vue + Vue Router is dead simple. With Vue.js, we are already composing our application with components. When adding Vue Router to the mix, all we need to do is map our components to the routes and let Vue Router know where to render them. Here's a basic example: +Créer une application monopage avec Vue + Vue Router est vraiment simple. Avec Vue.js, nous concevons déjà notre application avec des composants. En ajoutant vue-router dans notre application, tout ce qu'il nous reste à faire est de relier nos composants aux routes, et de laisser vue-router faire le rendu. Voici un exemple de base : ## HTML @@ -17,16 +17,16 @@ Creating a Single-page Application with Vue + Vue Router is dead simple. With Vu
    -

    Hello App!

    +

    Bonjour l'application !

    - - - - Go to Foo - Go to Bar + + + + Aller à Foo + Aller à Bar

    - - + +
    ``` @@ -34,49 +34,48 @@ 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 -// and then call `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. Define route components. -// These can be imported from other files +// 1. Définissez les composants de route. +// Ces derniers peuvent être importés depuis d'autre fichier const Foo = { template: '
    foo
    ' } const Bar = { template: '
    bar
    ' } -// 2. Define some routes -// Each route should map to a component. The "component" can -// either be an actual component constructor created via -// `Vue.extend()`, or just a component options object. -// We'll talk about nested routes later. +// 2. Définissez des routes. +// Chaque route doit correspondre à un composant. Le « composant » peut +// soit être un véritable composant créé via `Vue.extend()`, ou juste un +// objet d'options. +// Nous parlerons plus tard des routes imbriquées. const routes = [ { path: '/foo', component: Foo }, { path: '/bar', component: Bar } ] -// 3. Create the router instance and pass the `routes` option -// You can pass in additional options here, but let's -// keep it simple for now. +// 3. Créez l'instance du routeur et passez l'option `routes`. +// Vous pouvez également passer des options supplémentaires, +// mais nous allons faire simple pour l'instant. const router = new VueRouter({ - routes // short for `routes: routes` + routes // raccourci pour `routes: routes` }) -// 4. Create and mount the root instance. -// Make sure to inject the router with the router option to make the -// whole app router-aware. +// 5. Créez et montez l'instance de Vue. +// Soyez sûr d'injecter le routeur avec l'option `router` pour +// permettre à l'application tout entière d'être à l'écoute du routeur. const app = new Vue({ router }).$mount('#app') -// Now the app has started! +// L'application est maintenant en marche ! ``` -By injecting the router, we get access to it as `this.$router` as well as the current route as `this.$route` inside of any component: +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 () { - // We will see what `params` is shortly + // Nous verrons ce que représente `params` dans un instant. return this.$route.params.username } }, @@ -90,8 +89,8 @@ export default { } ``` -Throughout the docs, we will often use the `router` instance. Keep in mind that `this.$router` is exactly the same as using `router`. The reason we use `this.$router` is because we don't want to import the router in every single component that needs to manipulate routing. +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. -You can also check out this example [live](https://jsfiddle.net/yyx990803/xgrjzsup/). +Vous pouvez aussi regarder cet [exemple](https://jsfiddle.net/yyx990803/xgrjzsup/). -Notice that a `` automatically gets the `.router-link-active` class when its target route is matched. You can learn more about it in its [API reference](../api/#router-link). +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). diff --git a/docs/guide/advanced/data-fetching.md b/docs/guide/advanced/data-fetching.md index 3bb8ae9d9..e34f83535 100644 --- a/docs/guide/advanced/data-fetching.md +++ b/docs/guide/advanced/data-fetching.md @@ -1,24 +1,24 @@ -# Data Fetching +# Récupération de données -Sometimes you need to fetch data from the server when a route is activated. For example, before rendering a user profile, you need to fetch the user's data from the server. We can achieve this in two different ways: +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 : -- **Fetching After Navigation**: perform the navigation first, and fetch data in the incoming component's lifecycle hook. Display a loading state while data is being fetched. +- **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. -- **Fetching Before Navigation**: Fetch data before navigation in the route enter guard, and perform the navigation after data has been fetched. +- **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. -Technically, both are valid choices - it ultimately depends on the user experience you are aiming for. +Techniquement, les deux choix sont valides. Cela dépend de l'expérience utilisateur que vous souhaitez apporter. -## Fetching After Navigation +## Récupération de données après la navigation -When using this approach, we navigate and render the incoming component immediately, and fetch data in the component's `created` hook. It gives us the opportunity to display a loading state while the data is being fetched over the network, and we can also handle loading differently for each view. +En utilisant cette approche, nous naviguons et faisons immédiatement le rendu du composant et récupérons les données via le hook `created` du composant. Cela nous donne l'opportunité d'afficher un état de chargement pendant que les données sont récupérées à travers le réseau, et nous pouvons aussi gérer le chargement différemment pour chaque vue. -Let's assume we have a `Post` component that needs to fetch the data for a post based on `$route.params.id`: +Assumons que nous ayons un composant `Post` qui a besoin de récupérer des données pour un billet identifié par `$route.params.id` : ``` html