From f3fa1e7d1dc866c6fd323913f6a415320ce13487 Mon Sep 17 00:00:00 2001 From: Bruno Lesieur Date: Fri, 2 Jun 2017 09:07:19 +0200 Subject: [PATCH 01/17] First fr translation part. Signed-off-by: Bruno Lesieur --- docs/LANGS.md | 1 + docs/fr/README.md | 1 + docs/fr/SUMMARY.md | 32 +++++ docs/fr/advanced/data-fetching.md | 110 ++++++++++++++++++ docs/fr/advanced/lazy-loading.md | 44 +++++++ docs/fr/advanced/meta.md | 51 ++++++++ docs/fr/advanced/navigation-guards.md | 134 +++++++++++++++++++++ docs/fr/advanced/scroll-behavior.md | 61 ++++++++++ docs/fr/advanced/transitions.md | 58 +++++++++ docs/fr/api/component-injections.md | 21 ++++ docs/fr/api/options.md | 88 ++++++++++++++ docs/fr/api/route-object.md | 89 ++++++++++++++ docs/fr/api/router-instance.md | 86 ++++++++++++++ docs/fr/api/router-link.md | 142 +++++++++++++++++++++++ docs/fr/api/router-view.md | 27 +++++ docs/fr/essentials/dynamic-matching.md | 74 ++++++++++++ docs/fr/essentials/getting-started.md | 69 +++++++++++ docs/fr/essentials/history-mode.md | 60 ++++++++++ docs/fr/essentials/named-routes.md | 32 +++++ docs/fr/essentials/named-views.md | 30 +++++ docs/fr/essentials/navigation.md | 71 ++++++++++++ docs/fr/essentials/nested-routes.md | 100 ++++++++++++++++ docs/fr/essentials/passing-props.md | 79 +++++++++++++ docs/fr/essentials/redirect-and-alias.md | 58 +++++++++ docs/fr/installation.md | 44 +++++++ 25 files changed, 1562 insertions(+) create mode 100644 docs/fr/README.md create mode 100644 docs/fr/SUMMARY.md create mode 100644 docs/fr/advanced/data-fetching.md create mode 100644 docs/fr/advanced/lazy-loading.md create mode 100644 docs/fr/advanced/meta.md create mode 100644 docs/fr/advanced/navigation-guards.md create mode 100644 docs/fr/advanced/scroll-behavior.md create mode 100644 docs/fr/advanced/transitions.md create mode 100644 docs/fr/api/component-injections.md create mode 100644 docs/fr/api/options.md create mode 100644 docs/fr/api/route-object.md create mode 100644 docs/fr/api/router-instance.md create mode 100644 docs/fr/api/router-link.md create mode 100644 docs/fr/api/router-view.md create mode 100644 docs/fr/essentials/dynamic-matching.md create mode 100644 docs/fr/essentials/getting-started.md create mode 100644 docs/fr/essentials/history-mode.md create mode 100644 docs/fr/essentials/named-routes.md create mode 100644 docs/fr/essentials/named-views.md create mode 100644 docs/fr/essentials/navigation.md create mode 100644 docs/fr/essentials/nested-routes.md create mode 100644 docs/fr/essentials/passing-props.md create mode 100644 docs/fr/essentials/redirect-and-alias.md create mode 100644 docs/fr/installation.md diff --git a/docs/LANGS.md b/docs/LANGS.md index 6654d54e8..2af5399fd 100644 --- a/docs/LANGS.md +++ b/docs/LANGS.md @@ -1,4 +1,5 @@ * [2.0 - English](en/) +* [2.0 - French](fr/) * [2.0 - Japanese](ja/) * [2.0 - 中文](zh-cn/) * [2.0 - German](de/) diff --git a/docs/fr/README.md b/docs/fr/README.md new file mode 100644 index 000000000..f8a898044 --- /dev/null +++ b/docs/fr/README.md @@ -0,0 +1 @@ +{% include "./SUMMARY.md" %} diff --git a/docs/fr/SUMMARY.md b/docs/fr/SUMMARY.md new file mode 100644 index 000000000..8c11415e9 --- /dev/null +++ b/docs/fr/SUMMARY.md @@ -0,0 +1,32 @@ +# 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). + +**[Notes de release](https://github.com/vuejs/vue-router/releases)** + +- [Installation](installation.md) +- Essentiel + - [Pour commencer](essentials/getting-started.md) + - [Dynamic Route Matching (En)](essentials/dynamic-matching.md) + - [Nested Routes (En)](essentials/nested-routes.md) + - [Programmatic Navigation (En)](essentials/navigation.md) + - [Named Routes (En)](essentials/named-routes.md) + - [Named Views (En)](essentials/named-views.md) + - [Redirect and Alias (En)](essentials/redirect-and-alias.md) + - [Passing Props to Route Components (En)](essentials/passing-props.md) + - [HTML5 History Mode (En)](essentials/history-mode.md) +- Avancé + - [Navigation Guards (En)](advanced/navigation-guards.md) + - [Route Meta Fields (En)](advanced/meta.md) + - [Transitions (En)](advanced/transitions.md) + - [La récupération de données](advanced/data-fetching.md) + - [Les transitions](advanced/transitions.md) + - [Comportement du défilement](advanced/scroll-behavior.md) + - [Le chargement à la volée](advanced/lazy-loading.md) +- Réference de l'API + - [router-link](api/router-link.md) + - [router-view](api/router-view.md) + - [L'objet Route](api/route-object.md) + - [Options de construction du routeur](api/options.md) + - [L'Instance du routeur](api/router-instance.md) + - [Injections de composant](api/component-injections.md) \ No newline at end of file diff --git a/docs/fr/advanced/data-fetching.md b/docs/fr/advanced/data-fetching.md new file mode 100644 index 000000000..29f67715c --- /dev/null +++ b/docs/fr/advanced/data-fetching.md @@ -0,0 +1,110 @@ +# La récupération de données + +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ée avant la navigation** : récupère les données avant la navigation dans la fonction de sécurisation 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. + +## Récupération de données après la navigation + +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. + +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 + +``` + +``` js +export default { + data () { + return { + loading: false, + post: null, + error: null + } + }, + created () { + // récupérer les données lorsque la vue est créée et + // que les données sont déjà observées + this.fetchData() + }, + watch: { + // appeler encore la méthode si la route change + '$route': 'fetchData' + }, + methods: { + fetchData () { + this.error = this.post = null + this.loading = true + // remplacer `getPost` par une fonction de récupération de données + getPost(this.$route.params.id, (err, post) => { + this.loading = false + if (err) { + this.error = err.toString() + } else { + this.post = post + } + }) + } + } +} +``` + +## 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 de sécurisation `beforeRouteEnter` du composant à venir, et seulement appeler `next` lorsque la récupération est terminée : + +``` js +export default { + data () { + return { + post: null, + error: null + } + }, + beforeRouteEnter (to, from, next) { + getPost(to.params.id, (err, post) => { + next(vm => vm.setData(err, post)) + }) + }, + // quand la route change et que ce composant est déjà rendu, + // la logique est un peu différente + beforeRouteUpdate (to, from, next) { + this.post = null + getPost(to.params.id, (err, post) => { + this.setData(err, post) + next() + }) + }, + methods: { + setData (err, post) { + if (err) { + this.error = err.toString() + } else { + this.post = post + } + } + } +} +``` + +L'utilisateur va rester sur la vue précédente pendant que la ressource est en train d'être récupérée pour la vue à venir. Il est cependant recommandé d'afficher une barre de progression ou un autre type d'indicateur pendant que les données sont en train d'être récupérées. Si la récupération échoue, il est aussi recommandé d'afficher une sorte de message d'erreur global. diff --git a/docs/fr/advanced/lazy-loading.md b/docs/fr/advanced/lazy-loading.md new file mode 100644 index 000000000..989dcbd17 --- /dev/null +++ b/docs/fr/advanced/lazy-loading.md @@ -0,0 +1,44 @@ +# Le chargement à la volée + +Pendant la construction d'applications avec un empaqueteur (« bundler »), le paquet 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-require/) de webpack, il est très facile de charger à la volée les composants de route. + +Tout ce que nous avons à faire, c'est de définir les composants de notre route en tant que composants asynchrones : + +``` js +const Foo = resolve => { + // `require.ensure` est une syntaxe spéciale de webpack pour une séparation de code. + require.ensure(['./Foo.vue'], () => { + resolve(require('./Foo.vue')) + }) +} +``` + +Il y a aussi une alternative à la syntaxe de séparation de code utilisant l'inclusion à la sauce AMD, cela peut être simplifié en : + +``` js +const Foo = resolve => require(['./Foo.vue'], resolve) +``` + +Rien n'a besoin d'être modifié dans la configuration de la route, utilisez `Foo` comme d'habitude. + +``` js +const router = new VueRouter({ + routes: [ + { path: '/foo', component: Foo } + ] +}) +``` + +### Grouper des composants dans le même fragment + +Parfois on aimerait grouper tous les composants imbriqués sous la même route, dans un seul et même fragment asynchrone. Pour arriver à cela, nous avons besoin d'utiliser les [fragments nommés](https://webpack.js.org/guides/code-splitting-require/#chunkname) en donnant un nom au fragment en 3ème argument de `require.ensure`. + +``` js +const Foo = r => require.ensure([], () => r(require('./Foo.vue')), 'group-foo') +const Bar = r => require.ensure([], () => r(require('./Bar.vue')), 'group-foo') +const Baz = r => require.ensure([], () => r(require('./Baz.vue')), 'group-foo') +``` + +webpack groupera tous les modules asynchrones avec le même nom de fragment, dans le même fragment asynchrone. Cela signifie aussi que nous n'avons plus besoin de lister explicitement les dépendances pour `require.ensure` (équivaut à passer un tableau vide). diff --git a/docs/fr/advanced/meta.md b/docs/fr/advanced/meta.md new file mode 100644 index 000000000..998b6c134 --- /dev/null +++ b/docs/fr/advanced/meta.md @@ -0,0 +1,51 @@ +# Route Meta Fields (En)

*Cette page est en cours de traduction française. Revenez une autre fois pour lire une traduction achevée ou [participez à la traduction française ici](https://github.com/vuejs-fr/vue-router).* + +You can include a `meta` field when defining a route: + +``` js +const router = new VueRouter({ + routes: [ + { + path: '/foo', + component: Foo, + children: [ + { + path: 'bar', + component: Bar, + // a meta field + meta: { requiresAuth: true } + } + ] + } + ] +}) +``` + +So how do we access this `meta` field? + +First, each route object in the `routes` configuration is called a **route record**. Route records may be nested. Therefore when a route is matched, it can potentially match more than one route record. + +For example, with the above route config, the URL `/foo/bar` will match both the parent route record and the child route record. + +All route records matched by a route are exposed on the `$route` object (and also route objects in navigation guards) as the `$route.matched` Array. Therefore, we will need to iterate over `$route.matched` to check for meta fields in route records. + +An example use case is checking for a meta field in the global navigation guard: + +``` js +router.beforeEach((to, from, next) => { + if (to.matched.some(record => record.meta.requiresAuth)) { + // this route requires auth, check if logged in + // if not, redirect to login page. + if (!auth.loggedIn()) { + next({ + path: '/login', + query: { redirect: to.fullPath } + }) + } else { + next() + } + } else { + next() // make sure to always call next()! + } +}) +``` diff --git a/docs/fr/advanced/navigation-guards.md b/docs/fr/advanced/navigation-guards.md new file mode 100644 index 000000000..97dfb6903 --- /dev/null +++ b/docs/fr/advanced/navigation-guards.md @@ -0,0 +1,134 @@ +# Navigation Guards (En)

*Cette page est en cours de traduction française. Revenez une autre fois pour lire une traduction achevée ou [participez à la traduction française ici](https://github.com/vuejs-fr/vue-router).* + +As the name suggests, the navigation guards provided by `vue-router` are primarily used to guard navigations either by redirecting it or canceling it. There are a number of ways to hook into the route navigation process: globally, per-route, or in-component. + +Remember that **params or query changes won't trigger enter/leave navigation guards**. You can either [watch the `$route` object](../essentials/dynamic-matching.md#reacting-to-params-changes) to react to those changes, or use the `beforeRouteUpdate` in-component guard. + +### Global Guards + +You can register global before guards using `router.beforeEach`: + +``` js +const router = new VueRouter({ ... }) + +router.beforeEach((to, from, next) => { + // ... +}) +``` + +Global before guards are called in creation order, whenever a navigation is triggered. Guards may be resolved asynchronously, and the navigation is considered **pending** before all hooks have been resolved. + +Every guard function receives three arguments: + +- **`to: Route`**: the target [Route Object](../api/route-object.md) being navigated to. + +- **`from: Route`**: the current route being navigated away from. + +- **`next: Function`**: this function must be called to **resolve** the hook. The action depends on the arguments provided to `next`: + + - **`next()`**: move on to the next hook in the pipeline. If no hooks are left, the navigation is **confirmed**. + + - **`next(false)`**: abort the current navigation. If the browser URL was changed (either manually by the user or via back button), it will be reset to that of the `from` route. + + - **`next('/')` or `next({ path: '/' })`**: redirect to a different location. The current navigation will be aborted and a new one will be started. + + - **`next(error)`**: (2.4.0+) if the argument passed to `next` is an instance of `Error`, the navigation will be aborted and the error will be passed to callbacks registered via `router.onError()`. + +**Make sure to always call the `next` function, otherwise the hook will never be resolved.** + +### Global Resolve Guards + +> New in 2.5.0 + +In 2.5.0+ you can register a global guard with `router.beforeResolve`. This is similar to `router.beforeEach`, with the difference that resolve guards will be called right before the navigation is confirmed, **after all in-component guards and async route components are resolved**. + +### Global After Hooks + +You can also register global after hooks, however unlike guards, these hooks do not get a `next` function and cannot affect the navigation: + +``` js +router.afterEach((to, from) => { + // ... +}) +``` + +### Per-Route Guard + +You can define `beforeEnter` guards directly on a route's configuration object: + +``` js +const router = new VueRouter({ + routes: [ + { + path: '/foo', + component: Foo, + beforeEnter: (to, from, next) => { + // ... + } + } + ] +}) +``` + +These guards have the exact same signature as global before guards. + +### Sécurisation intra-composants + +Finally, you can directly define route navigation guards inside route components (the ones passed to the router configuration) with the following options: + +- `beforeRouteEnter` +- `beforeRouteUpdate` (added in 2.2) +- `beforeRouteLeave` + +``` js +const Foo = { + template: `...`, + beforeRouteEnter (to, from, next) { + // called before the route that renders this component is confirmed. + // does NOT have access to `this` component instance, + // because it has not been created yet when this guard is called! + }, + beforeRouteUpdate (to, from, next) { + // called when the route that renders this component has changed, + // but this component is reused in the new route. + // For example, for a route with dynamic params /foo/:id, when we + // navigate between /foo/1 and /foo/2, the same Foo component instance + // will be reused, and this hook will be called when that happens. + // has access to `this` component instance. + }, + beforeRouteLeave (to, from, next) { + // called when the route that renders this component is about to + // be navigated away from. + // has access to `this` component instance. + } +} +``` + +The `beforeRouteEnter` guard does **NOT** have access to `this`, because the guard is called before the navigation is confirmed, thus the new entering component has not even been created yet. + +However, you can access the instance by passing a callback to `next`. The callback will be called when the navigation is confirmed, and the component instance will be passed to the callback as the argument: + +``` js +beforeRouteEnter (to, from, next) { + next(vm => { + // access to component instance via `vm` + }) +} +``` + +You can directly access `this` inside `beforeRouteLeave`. The leave guard is usually used to prevent the user from accidentally leaving the route with unsaved edits. The navigation can be canceled by calling `next(false)`. + +### The Full Navigation Resolution Flow + +1. Navigation triggered +2. Call leave guards in deactivated components +3. Call global `beforeEach` guards +4. Call `beforeRouteUpdate` guards in reused components (2.2+) +5. Call `beforeEnter` in route configs +6. Resolve async route components +7. Call `beforeRouteEnter` in activated components +8. Call global `beforeResolve` guards (2.5+) +9. Navigation confirmed. +10. Call global `afterEach` hooks. +11. DOM updates triggered. +12. Call callbacks passed to `next` in `beforeRouteEnter` guards with instantiated instances. diff --git a/docs/fr/advanced/scroll-behavior.md b/docs/fr/advanced/scroll-behavior.md new file mode 100644 index 000000000..2d176188c --- /dev/null +++ b/docs/fr/advanced/scroll-behavior.md @@ -0,0 +1,61 @@ +# Comportement du défilement + +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.** + +Pendant la création de l'instance du routeur, vous pouvez renseigner la fonction `scrollBehavior` : + +``` js +const router = new VueRouter({ + routes: [...], + scrollBehavior (to, from, savedPosition) { + // retourner la position désirée + } +}) +``` + +La fonction `scrollBehavior` reçoit les objets de route `to` et `from`. Le troisième argument, `savedPosition`, est disponible uniquement si c'est une navigation `popstate` (déclenchée par les boutons précédent/suivant du navigateur). + +La fonction peut retourner un objet décrivant la position du défilement. L'objet peut être de la forme : + +- `{ x: number, y: number }` +- `{ selector: String }` + +Si une valeur équivalente à `false` ou un objet vide est retourné, aucun défilement ne sera produit. + +Par exemple : + +``` js +scrollBehavior (to, from, savedPosition) { + return { x: 0, y: 0 } +} +``` + +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 : + +``` js +scrollBehavior (to, from, savedPosition) { + if (savedPosition) { + return savedPosition + } else { + return { x: 0, y: 0 } + } +} +``` + +Si vous voulez simuler le comportement « aller à l'ancre » : + +``` js +scrollBehavior (to, from, savedPosition) { + if (to.hash) { + return { + selector: to.hash + } + } +} +``` + +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). diff --git a/docs/fr/advanced/transitions.md b/docs/fr/advanced/transitions.md new file mode 100644 index 000000000..d90dc45cc --- /dev/null +++ b/docs/fr/advanced/transitions.md @@ -0,0 +1,58 @@ +# Les transitions + +Vu que `` est essentiellement un composant dynamique, on peut lui appliquer certains effets de transitions en utilisant le composant `` : + +``` html + + + +``` + +[Tout à propos de ``](http://fr.vuejs.org/v2/guide/transitions.html) fonctionne également ici de la même manière. + +### 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 : + +``` js +const Foo = { + template: ` + +
...
+ + ` +} + +const Bar = { + template: ` + +
...
+ + ` +} +``` + +# Transition dynamique basée sur la route + +Il est aussi possible de déterminer la transition à utiliser en se basant sur la relation entre la route cible et la route actuelle : + +``` html + + + + +``` + +``` js +// et dans le composant parent, +// observer la `$route` pour déterminer la transition à utiliser +watch: { + '$route' (to, from) { + const toDepth = to.path.split('/').length + const fromDepth = from.path.split('/').length + this.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left' + } +} +``` + +Voir un exemple complet [ici](https://github.com/vuejs/vue-router/blob/dev/examples/transitions/app.js). diff --git a/docs/fr/api/component-injections.md b/docs/fr/api/component-injections.md new file mode 100644 index 000000000..c98415a6b --- /dev/null +++ b/docs/fr/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 la [Sécurisation intra-composants](../advanced/navigation-guards.md#securisation-intra-composants). diff --git a/docs/fr/api/options.md b/docs/fr/api/options.md new file mode 100644 index 000000000..ee608d967 --- /dev/null +++ b/docs/fr/api/options.md @@ -0,0 +1,88 @@ +# 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; + } + ``` + +### 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 exact. Voir aussi [router-link](router-link.md). + +### scrollBehavior + +- type : `Function` + + Signature : + + ``` + ( + to: Route, + from: Route, + savedPosition?: { x: number, y: number } + ) => { x: number, y: number } | { selector: string } | ?{} + ``` + + Pour plus de détails, voir [Comportement du Scroll](../advanced/scroll-behavior.md). + +### parseQuery / stringifyQuery + +> 2.4.0+ + +- 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. diff --git a/docs/fr/api/route-object.md b/docs/fr/api/route-object.md new file mode 100644 index 000000000..fb9696c34 --- /dev/null +++ b/docs/fr/api/route-object.md @@ -0,0 +1,89 @@ +# 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 courante 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 de sécurisation 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 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"`. + +- **$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 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. + +- **$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. + +- **$route.fullPath** + + - type : `string` + + L'URL entièrement résolue, 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)). diff --git a/docs/fr/api/router-instance.md b/docs/fr/api/router-instance.md new file mode 100644 index 000000000..2f3d98562 --- /dev/null +++ b/docs/fr/api/router-instance.md @@ -0,0 +1,86 @@ +# 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 de sécurités globales de navigation. Voir les [sécurités de navigation](../advanced/navigation-guards.md). + + Dans la version 2.5.0+, ces trois méthodes retournent une fonction qui enlève les fonctions de sécurisations 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; + } + ``` + + +- **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ée). + +- **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 de sécurisation 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 sécurisation 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 new file mode 100644 index 000000000..74fe81872 --- /dev/null +++ b/docs/fr/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 vera 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. + +- En utilisant l'option `base` dans le mode historique HTML5, vous n'avez pas besoin de l'inclure dans les props `to` des URLs. + +### 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 chaîne 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, `` vera 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 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. + +### 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/fr/api/router-view.md b/docs/fr/api/router-view.md new file mode 100644 index 000000000..abce22d1d --- /dev/null +++ b/docs/fr/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 example. + +### 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/fr/essentials/dynamic-matching.md b/docs/fr/essentials/dynamic-matching.md new file mode 100644 index 000000000..b52be5088 --- /dev/null +++ b/docs/fr/essentials/dynamic-matching.md @@ -0,0 +1,74 @@ +# Dynamic Route Matching (En)

    *Cette page est en cours de traduction française. Revenez une autre fois pour lire une traduction achevée ou [participez à la traduction française ici](https://github.com/vuejs-fr/vue-router).* + +Very often we will need to map routes with the given pattern to the same component. For example we may have a `User` component which should be rendered for all users but with different user IDs. In `vue-router` we can use a dynamic segment in the path to achieve that: + +``` js +const User = { + template: '
    User
    ' +} + +const router = new VueRouter({ + routes: [ + // dynamic segments start with a colon + { path: '/user/:id', component: User } + ] +}) +``` + +Now URLs like `/user/foo` and `/user/bar` will both map to the same route. + +A dynamic segment is denoted by a colon `:`. When a route is matched, the value of the dynamic segments will be exposed as `this.$route.params` in every component. Therefore, we can render the current user ID by updating `User`'s template to this: + +``` js +const User = { + template: '
    User {{ $route.params.id }}
    ' +} +``` + +You can checkout a live example [here](http://jsfiddle.net/yyx990803/4xfa2f19/). + +You can have multiple dynamic segments in the same route, and they will map to corresponding fields on `$route.params`. Examples: + +| pattern | matched path | $route.params | +|---------|------|--------| +| /user/:username | /user/evan | `{ username: 'evan' }` | +| /user/:username/post/:post_id | /user/evan/post/123 | `{ username: 'evan', post_id: 123 }` | + +In addition to `$route.params`, the `$route` object also exposes other useful information such as `$route.query` (if there is a query in the URL), `$route.hash`, etc. You can check out the full details in the [API Reference](../api/route-object.md). + +### Reacting to Params Changes + +One thing to note when using routes with params is that when the user navigates from `/user/foo` to `/user/bar`, **the same component instance will be reused**. Since both routes render the same component, this is more efficient than destroying the old instance and then creating a new one. **However, this also means that the lifecycle hooks of the component will not be called**. + +To react to params changes in the same component, you can simply watch the `$route` object: + +``` js +const User = { + template: '...', + watch: { + '$route' (to, from) { + // react to route changes... + } + } +} +``` + +Or, use the `beforeRouteUpdate` guard introduced in 2.2: + +``` js +const User = { + template: '...', + beforeRouteUpdate (to, from, next) { + // react to route changes... + // don't forget to call next() + } +} +``` + +### Advanced Matching Patterns + +`vue-router` uses [path-to-regexp](https://github.com/pillarjs/path-to-regexp) as its path matching engine, so it supports many advanced matching patterns such as optional dynamic segments, zero or more / one or more requirements, and even custom regex patterns. Check out its [documentation](https://github.com/pillarjs/path-to-regexp#parameters) for these advanced patterns, and [this example](https://github.com/vuejs/vue-router/blob/dev/examples/route-matching/app.js) of using them in `vue-router`. + +### Matching Priority + +Sometimes the same URL may be matched by multiple routes. In such a case the matching priority is determined by the order of route definition: the earlier a route is defined, the higher priority it gets. diff --git a/docs/fr/essentials/getting-started.md b/docs/fr/essentials/getting-started.md new file mode 100644 index 000000000..05e3cf2c7 --- /dev/null +++ b/docs/fr/essentials/getting-started.md @@ -0,0 +1,69 @@ +# Pour commencer + +> Nous utiliserons [ES2015](https://github.com/lukehoban/es6features) dans les exemples de code dans ce guide. + +Créer une application monopage avec Vue.js + 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 : + +> 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). + +### HTML + +``` html + + + +
    +

    Bonjour l'application !

    +

    + + + + Aller à Foo + Aller à Bar +

    + + + +
    +``` + +### 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)`. + +// 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. 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. 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 // raccourci pour `routes: routes` +}) + +// 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') + +// L'application est maintenant en marche ! +``` + +Vous pouvez aussi regarder cet [exemple](http://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 new file mode 100644 index 000000000..36e1a1b2e --- /dev/null +++ b/docs/fr/essentials/history-mode.md @@ -0,0 +1,60 @@ +# HTML5 History Mode (En)

    *Cette page est en cours de traduction française. Revenez une autre fois pour lire une traduction achevée ou [participez à la traduction française ici](https://github.com/vuejs-fr/vue-router).* + +The default mode for `vue-router` is _hash mode_ - it uses the URL hash to simulate a full URL so that the page won't be reloaded when the URL changes. + +To get rid of the hash, we can use the router's **history mode**, which leverages the `history.pushState` API to achieve URL navigation without a page reload: + +``` js +const router = new VueRouter({ + mode: 'history', + routes: [...] +}) +``` + +When using history mode, the URL will look "normal," e.g. `http://oursite.com/user/id`. Beautiful! + +Here comes a problem, though: Since our app is a single page client side app, without a proper server configuration, the users will get a 404 error if they access `http://oursite.com/user/id` directly in their browser. Now that's ugly. + +Not to worry: To fix the issue, all you need to do is add a simple catch-all fallback route to your server. If the URL doesn't match any static assets, it should serve the same `index.html` page that your app lives in. Beautiful, again! + +## Example Server Configurations + +#### Apache + +```apache + + RewriteEngine On + RewriteBase / + RewriteRule ^index\.html$ - [L] + RewriteCond %{REQUEST_FILENAME} !-f + RewriteCond %{REQUEST_FILENAME} !-d + RewriteRule . /index.html [L] + +``` + +#### nginx + +```nginx +location / { + try_files $uri $uri/ /index.html; +} +``` + +#### Node.js (Express) + +For Node.js/Express, consider using [connect-history-api-fallback middleware](https://github.com/bripkens/connect-history-api-fallback). + +## Caveat + +There is a caveat to this: Your server will no longer report 404 errors as all not-found paths now serve up your `index.html` file. To get around the issue, you should implement a catch-all route within your Vue app to show a 404 page: + +``` js +const router = new VueRouter({ + mode: 'history', + routes: [ + { path: '*', component: NotFoundComponent } + ] +}) +``` + +Alternatively, if you are using a Node.js server, you can implement the fallback by using the router on the server side to match the incoming URL and respond with 404 if no route is matched. diff --git a/docs/fr/essentials/named-routes.md b/docs/fr/essentials/named-routes.md new file mode 100644 index 000000000..8e03b5dd6 --- /dev/null +++ b/docs/fr/essentials/named-routes.md @@ -0,0 +1,32 @@ +# Named Routes (En)

    *Cette page est en cours de traduction française. Revenez une autre fois pour lire une traduction achevée ou [participez à la traduction française ici](https://github.com/vuejs-fr/vue-router).* + +Sometimes it is more convenient to identify a route with a name, especially when linking to a route or performing navigations. You can give a route a name in the `routes` options while creating the Router instance: + +``` js +const router = new VueRouter({ + routes: [ + { + path: '/user/:userId', + name: 'user', + component: User + } + ] +}) +``` + +To link to a named route, you can pass an object to the `router-link` +component's `to` prop: + +``` html +User +``` + +This is the exact same object used programatically with `router.push()`: + +``` js +router.push({ name: 'user', params: { userId: 123 }}) +``` + +In both cases, the router will navigate to the path `/user/123`. + +Full example [here](https://github.com/vuejs/vue-router/blob/dev/examples/named-routes/app.js). diff --git a/docs/fr/essentials/named-views.md b/docs/fr/essentials/named-views.md new file mode 100644 index 000000000..3a28369d7 --- /dev/null +++ b/docs/fr/essentials/named-views.md @@ -0,0 +1,30 @@ +# Named Views (En)

    *Cette page est en cours de traduction française. Revenez une autre fois pour lire une traduction achevée ou [participez à la traduction française ici](https://github.com/vuejs-fr/vue-router).* + +Sometimes you need to display multiple views at the same time instead of nesting them, e.g. creating a layout with a `sidebar` view and a `main` view. This is where named views came in handy. Instead of having one single outlet in your view, you can have multiple and give each of them a name. A `router-view` without a name will be given `default` as its name. + +``` html + + + +``` + +A view is rendered by using a component, therefore multiple views require multiple components for the same route. Make sure to use the `components` (with +an s) option: + +``` js +const router = new VueRouter({ + routes: [ + { + path: '/', + components: { + default: Foo, + a: Bar, + b: Baz + } + } + ] +}) +``` + +A working demo of this example can be found +[here](https://jsfiddle.net/posva/6du90epg/). diff --git a/docs/fr/essentials/navigation.md b/docs/fr/essentials/navigation.md new file mode 100644 index 000000000..af7cd6477 --- /dev/null +++ b/docs/fr/essentials/navigation.md @@ -0,0 +1,71 @@ +# Programmatic Navigation (En)

    *Cette page est en cours de traduction française. Revenez une autre fois pour lire une traduction achevée ou [participez à la traduction française ici](https://github.com/vuejs-fr/vue-router).* + +Aside from using `` to create anchor tags for declarative navigation, we can do this programmatically using the router's instance methods. + +#### `router.push(location, onComplete?, onAbort?)` + +**Note: Inside of a Vue instance, you have access to the router instance as `$router`. You can therefore call `this.$router.push`.** + +To navigate to a different URL, use `router.push`. This method pushes a new entry into the history stack, so when the user clicks the browser back button they will be taken to the previous URL. + +This is the method called internally when you click a ``, so clicking `` is the equivalent of calling `router.push(...)`. + +| Declarative | Programmatic | +|-------------|--------------| +| `` | `router.push(...)` | + +The argument can be a string path, or a location descriptor object. Examples: + +``` js +// literal string path +router.push('home') + +// object +router.push({ path: 'home' }) + +// named route +router.push({ name: 'user', params: { userId: 123 }}) + +// with query, resulting in /register?plan=private +router.push({ path: 'register', query: { plan: 'private' }}) +``` + +In 2.2.0+, optionally provide `onComplete` and `onAbort` callbacks to `router.push` or `router.replace` as the 2nd and 3rd arguments. These callbacks will be called when the navigation either successfully completed (after all async hooks are resolved), or aborted (navigated to the same route, or to a different route before current navigation has finished), respectively. + +#### `router.replace(location, onComplete?, onAbort?)` + +It acts like `router.push`, the only difference is that it navigates without pushing a new history entry, as its name suggests - it replaces the current entry. + +| Declarative | Programmatic | +|-------------|--------------| +| `` | `router.replace(...)` | + + +#### `router.go(n)` + +This method takes a single integer as parameter that indicates by how many steps to go forwards or go backwards in the history stack, similar to `window.history.go(n)`. + +Examples + +``` js +// go forward by one record, the same as history.forward() +router.go(1) + +// go back by one record, the same as history.back() +router.go(-1) + +// go forward by 3 records +router.go(3) + +// fails silently if there aren't that many records. +router.go(-100) +router.go(100) +``` + +#### History Manipulation + +You may have noticed that `router.push`, `router.replace` and `router.go` are counterparts of [`window.history.pushState`, `window.history.replaceState` and `window.history.go`](https://developer.mozilla.org/en-US/docs/Web/API/History), and they do imitate the `window.history` APIs. + +Therefore, if you are already familiar with [Browser History APIs](https://developer.mozilla.org/en-US/docs/Web/API/History_API), manipulating history will be super easy with vue-router. + +It is worth mentioning that vue-router navigation methods (`push`, `replace`, `go`) work consistently in all router modes (`history`, `hash` and `abstract`). diff --git a/docs/fr/essentials/nested-routes.md b/docs/fr/essentials/nested-routes.md new file mode 100644 index 000000000..fc76d4b3c --- /dev/null +++ b/docs/fr/essentials/nested-routes.md @@ -0,0 +1,100 @@ +# Nested Routes (En)

    *Cette page est en cours de traduction française. Revenez une autre fois pour lire une traduction achevée ou [participez à la traduction française ici](https://github.com/vuejs-fr/vue-router).* + +Real app UIs are usually composed of components that are nested multiple levels deep. It is also very common that the segments of a URL corresponds to a certain structure of nested components, for example: + +``` +/user/foo/profile /user/foo/posts ++------------------+ +-----------------+ +| User | | User | +| +--------------+ | | +-------------+ | +| | Profile | | +------------> | | Posts | | +| | | | | | | | +| +--------------+ | | +-------------+ | ++------------------+ +-----------------+ +``` + +With `vue-router`, it is very simple to express this relationship using nested route configurations. + +Given the app we created in the last chapter: + +``` html +
    + +
    +``` + +``` js +const User = { + template: '
    User {{ $route.params.id }}
    ' +} + +const router = new VueRouter({ + routes: [ + { path: '/user/:id', component: User } + ] +}) +``` + +The `` here is a top-level outlet. It renders the component matched by a top level route. Similarly, a rendered component can also contain its own, nested ``. For example, if we add one inside the `User` component's template: + +``` js +const User = { + template: ` +
    +

    User {{ $route.params.id }}

    + +
    + ` +} +``` + +To render components into this nested outlet, we need to use the `children` +option in `VueRouter` constructor config: + +``` js +const router = new VueRouter({ + routes: [ + { path: '/user/:id', component: User, + children: [ + { + // UserProfile will be rendered inside User's + // when /user/:id/profile is matched + path: 'profile', + component: UserProfile + }, + { + // UserPosts will be rendered inside User's + // when /user/:id/posts is matched + path: 'posts', + component: UserPosts + } + ] + } + ] +}) +``` + +**Note that nested paths that start with `/` will be treated as a root path. This allows you to leverage the component nesting without having to use a nested URL.** + +As you can see the `children` option is just another Array of route configuration objects like `routes` itself. Therefore, you can keep nesting views as much as you need. + +At this point, with the above configuration, when you visit `/user/foo`, nothing will be rendered inside `User`'s outlet, because no sub route is matched. Maybe you do want to render something there. In such case you can provide an empty subroute path: + +``` js +const router = new VueRouter({ + routes: [ + { + path: '/user/:id', component: User, + children: [ + // UserHome will be rendered inside User's + // when /user/:id is matched + { path: '', component: UserHome }, + + // ...other sub routes + ] + } + ] +}) +``` + +A working demo of this example can be found [here](http://jsfiddle.net/yyx990803/L7hscd8h/). diff --git a/docs/fr/essentials/passing-props.md b/docs/fr/essentials/passing-props.md new file mode 100644 index 000000000..6ed2711c3 --- /dev/null +++ b/docs/fr/essentials/passing-props.md @@ -0,0 +1,79 @@ +# Passing Props to Route Components (En)

    *Cette page est en cours de traduction française. Revenez une autre fois pour lire une traduction achevée ou [participez à la traduction française ici](https://github.com/vuejs-fr/vue-router).* + +Using `$route` in your component creates a tight coupling with the route which limits the flexibility of the component as it can only be used on certain urls. + +To decouple this component from the router use props: + +**❌ Coupled to $route** + +``` js +const User = { + template: '
    User {{ $route.params.id }}
    ' +} +const router = new VueRouter({ + routes: [ + { path: '/user/:id', component: User } + ] +}) +``` + +**👍 Decoupled with props** + +``` js +const User = { + props: ['id'], + template: '
    User {{ id }}
    ' +} +const router = new VueRouter({ + routes: [ + { path: '/user/:id', component: User, props: true } + + // for routes with named views, you have to define the props option for each named view: + { + path: '/user/:id', + components: { default: User, sidebar: Sidebar }, + props: { default: true, sidebar: false } + } + ] +}) +``` + +This allows you to use the component anywhere, which makes the component easier to reuse and test. + +### Boolean mode + +When props is set to true, the route.params will be set as the component props. + +### Object mode + +When props is an object, this will be set as the component props as-is. +Useful for when the props are static. + +``` js +const router = new VueRouter({ + routes: [ + { path: '/promotion/from-newsletter', component: Promotion, props: { newsletterPopup: false } } + ] +}) +``` + +### Function mode + +You can create a function that returns props. +This allows you to cast the parameter to another type, combine static values with route-based values, etc. + +``` js +const router = new VueRouter({ + routes: [ + { path: '/search', component: SearchUser, props: (route) => ({ query: route.query.q }) } + ] +}) +``` + +The url: `/search?q=vue` would pass `{query: "vue"}` as props to the SearchUser component. + +Try to keep the props function stateless, as it's only evaluated on route changes. +Use a wrapper component if you need state to define the props, that way vue can react to state changes. + + +For advanced usage, checkout the [example](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 new file mode 100644 index 000000000..91033aefb --- /dev/null +++ b/docs/fr/essentials/redirect-and-alias.md @@ -0,0 +1,58 @@ +# Redirect and Alias (En)

    *Cette page est en cours de traduction française. Revenez une autre fois pour lire une traduction achevée ou [participez à la traduction française ici](https://github.com/vuejs-fr/vue-router).* + +### Redirect + +Redirecting is also done in the `routes` configuration. To redirect from `/a` to `/b`: + +``` js +const router = new VueRouter({ + routes: [ + { path: '/a', redirect: '/b' } + ] +}) +``` + +The redirect can also be targeting a named route: + +``` js +const router = new VueRouter({ + routes: [ + { path: '/a', redirect: { name: 'foo' }} + ] +}) +``` + +Or even use a function for dynamic redirecting: + +``` js +const router = new VueRouter({ + routes: [ + { path: '/a', redirect: to => { + // the function receives the target route as the argument + // return redirect path/location here. + }} + ] +}) +``` + +For other advanced usage, checkout the [example](https://github.com/vuejs/vue-router/blob/dev/examples/redirect/app.js). + +### Alias + +A redirect means when the user visits `/a`, and URL will be replaced by `/b`, and then matched as `/b`. But what is an alias? + +**An alias of `/a` as `/b` means when the user visits `/b`, the URL remains `/b`, but it will be matched as if the user is visiting `/a`.** + +The above can be expressed in the route configuration as: + +``` js +const router = new VueRouter({ + routes: [ + { path: '/a', component: A, alias: '/b' } + ] +}) +``` + +An alias gives you the freedom to map a UI structure to an arbitrary URL, instead of being constrained by the configuration's nesting structure. + +For advanced usage, checkout the [example](https://github.com/vuejs/vue-router/blob/dev/examples/route-alias/app.js). diff --git a/docs/fr/installation.md b/docs/fr/installation.md new file mode 100644 index 000000000..b57f2cea6 --- /dev/null +++ b/docs/fr/installation.md @@ -0,0 +1,44 @@ +# Installation + +### Téléchargement direct / CDN + +[https://unpkg.com/vue-router/dist/vue-router.js](https://unpkg.com/vue-router/dist/vue-router.js) + + +[Unpkg.com](https://unpkg.com) fournit des liens CDN basés sur NPM. Le lien ci-dessus pointera toujours vers la dernière release sur NPM. Vous pouvez aussi utiliser un tag ou une version spécifique via une URL comme `https://unpkg.com/vue-router@2.0.0/dist/vue-router.js`. + + +Incluez `vue-router` après Vue et l'installation sera automatique : + +``` html + + +``` + +### NPM + +``` bash +npm install vue-router +``` + +Lorsqu'il est utilisé avec un système de module, vous devez explicitement installer le router via `Vue.use()` : + +``` js +import Vue from 'vue' +import VueRouter from 'vue-router' + +Vue.use(VueRouter) +``` + +Vous n'avez pas besoin de faire cela lors de l'utilisation des balises de script globales (` ``` -### NPM +### npm ``` bash npm install vue-router From 0e30aa9a5c6e4abc742e0ea7d04f6c68f7448838 Mon Sep 17 00:00:00 2001 From: Bruno Lesieur Date: Tue, 1 Aug 2017 17:41:49 +0200 Subject: [PATCH 10/17] fix little mistakes Signed-off-by: Bruno Lesieur --- docs/fr/advanced/navigation-guards.md | 2 +- docs/fr/essentials/history-mode.md | 4 ++-- docs/fr/essentials/passing-props.md | 4 ++-- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/docs/fr/advanced/navigation-guards.md b/docs/fr/advanced/navigation-guards.md index e782d309a..f7f578dda 100644 --- a/docs/fr/advanced/navigation-guards.md +++ b/docs/fr/advanced/navigation-guards.md @@ -92,7 +92,7 @@ const Foo = { // appelée quand la route qui fait le rendu de ce composant change, // 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`, le même instance du composant `Foo` + // 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. // ce hook a accès à l'instance de ce composant via `this`. }, diff --git a/docs/fr/essentials/history-mode.md b/docs/fr/essentials/history-mode.md index 02839a28b..d5b0dad77 100644 --- a/docs/fr/essentials/history-mode.md +++ b/docs/fr/essentials/history-mode.md @@ -60,7 +60,7 @@ http.createServer((req, res) => { res.end(content) }) }).listen(httpPort, () => { - console.log("Server listening on: http://localhost:%s", httpPort) + console.log("Le serveur écoute à : http://localhost:%s", httpPort) }) ``` @@ -119,4 +119,4 @@ const router = new VueRouter({ }) ``` -Une alternative possible, si vous utilisez un serveur Node.js, est d'implémenter ce mécanisme de substitution en utilisant le routeur côté serveur pour vérifier la concordance des demande d'URL entrant. Si la route ne concorde avec rien, la page est inexistante. Consultez l'[utilisation de Vue côté serveur](https://ssr.vuejs.org/fr/) pour plus d'informations. +Une alternative possible, si vous utilisez un serveur Node.js, est d'implémenter ce mécanisme de substitution en utilisant le routeur côté serveur pour vérifier la concordance des demandes d'URL entrant. Si la route ne concorde avec rien, la page est inexistante. Consultez l'[utilisation de Vue côté serveur](https://ssr.vuejs.org/fr/) pour plus d'informations. diff --git a/docs/fr/essentials/passing-props.md b/docs/fr/essentials/passing-props.md index f28c1c4cd..15f0ba81d 100644 --- a/docs/fr/essentials/passing-props.md +++ b/docs/fr/essentials/passing-props.md @@ -17,7 +17,7 @@ const router = new VueRouter({ }) ``` -**👍 Découplé avec les props** +**👍 Découplé avec les `props`** ``` js const User = { @@ -58,7 +58,7 @@ const router = new VueRouter({ ### Mode fonction -Vous pouvez créer une fonction qui va retourner les props. Cela vous permet de coercer un paramètre dans un autre type, de combiner les valeurs statiques avec les valeurs des routes, etc. +Vous pouvez créer une fonction qui va retourner les props. Cela vous permet de caster des paramètres dans un autre type, de combiner les valeurs statiques avec les valeurs des routes, etc. ``` js const router = new VueRouter({ From 7317157416564cfc95ed4daff38b496d1c775786 Mon Sep 17 00:00:00 2001 From: Bruno Lesieur Date: Thu, 24 Aug 2017 09:18:33 +0200 Subject: [PATCH 11/17] New navigation.md section translated Signed-off-by: Bruno Lesieur --- docs/fr/essentials/navigation.md | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/docs/fr/essentials/navigation.md b/docs/fr/essentials/navigation.md index 111bc5a89..3b48f55eb 100644 --- a/docs/fr/essentials/navigation.md +++ b/docs/fr/essentials/navigation.md @@ -30,8 +30,23 @@ router.push({ name: 'user', params: { userId: 123 }}) router.push({ path: 'register', query: { plan: 'private' }}) ``` +**Note :** `params` est ignoré si `path` est fourni, ce qui n'est pas le cas pour `query`, comme démontrer dans l'exemple ci-dessous. +À la place, vous devez fournir le `name` de la route ou manuellement spécifier le `path` complet avec tous les paramètres : + +```js +const userId = 123 +router.push({ name: 'user', params: { userId }}) // -> /user/123 +router.push({ path: `/user/${userId}` }) // -> /user/123 +// Ceci ne vas PAS fonctionner +router.push({ path: '/user', params: { userId }}) // -> /user +``` + +Les mêmes règles s'appliquent pour la propriété `to` du composant `router-link`. + Dans la version 2.2.0+, vous pouvez optionnellement fournir les fonctions de rappel `onComplete` et `onAbort` à `router.push` ou `router.replace` en tant que deuxième et troisième arguments. Ces fonctions de rappel seront appelées quand la navigation sera respectivement ; complétée avec succès (après la résolution de tous les hooks asynchrones), ou arrêtée (navigation vers la même route ou vers une route différente avant que la navigation courante ne soit achevée). +**Note:** If the destination is the same as the current route and only params are changing (eg: going from one profile to another `/users/1` -> `/users/2`), you will have to use [beforeRouteUpdate](./dynamic-matching.html#reacting-to-params-changes) to react to changes (eg: fetching the user information). + #### `router.replace(location, onComplete?, onAbort?)` Il agit comme `router.push`. La seule différence est que la navigation se fait sans ajouter de nouvelle entrée dans la pile de l'historique. Comme son nom l'indique, il remplace l'entrée courante. From fb981d7d45947ce6f1af3d4de20e501dbb879086 Mon Sep 17 00:00:00 2001 From: Bruno Lesieur Date: Thu, 24 Aug 2017 09:22:25 +0200 Subject: [PATCH 12/17] fix typo Signed-off-by: Bruno Lesieur --- docs/fr/essentials/navigation.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/fr/essentials/navigation.md b/docs/fr/essentials/navigation.md index 3b48f55eb..4ed5a6b19 100644 --- a/docs/fr/essentials/navigation.md +++ b/docs/fr/essentials/navigation.md @@ -30,7 +30,7 @@ router.push({ name: 'user', params: { userId: 123 }}) router.push({ path: 'register', query: { plan: 'private' }}) ``` -**Note :** `params` est ignoré si `path` est fourni, ce qui n'est pas le cas pour `query`, comme démontrer dans l'exemple ci-dessous. +**Note :** `params` est ignoré si `path` est fourni, ce qui n'est pas le cas pour `query`, comme démontré dans l'exemple ci-dessous. À la place, vous devez fournir le `name` de la route ou manuellement spécifier le `path` complet avec tous les paramètres : ```js From 9476b424879572c65a14844abd7f88ce8f6c2205 Mon Sep 17 00:00:00 2001 From: Bruno Lesieur Date: Thu, 24 Aug 2017 09:26:29 +0200 Subject: [PATCH 13/17] Fix en consistency Signed-off-by: Bruno Lesieur --- docs/en/advanced/navigation-guards.md | 2 +- docs/en/essentials/navigation.md | 3 +-- docs/fr/advanced/navigation-guards.md | 2 +- docs/fr/essentials/navigation.md | 3 +-- 4 files changed, 4 insertions(+), 6 deletions(-) diff --git a/docs/en/advanced/navigation-guards.md b/docs/en/advanced/navigation-guards.md index a9efe15a2..5817b4d6f 100644 --- a/docs/en/advanced/navigation-guards.md +++ b/docs/en/advanced/navigation-guards.md @@ -77,7 +77,7 @@ These guards have the exact same signature as global before guards. Finally, you can directly define route navigation guards inside route components (the ones passed to the router configuration) with the following options: - `beforeRouteEnter` -- `beforeRouteUpdate` (added in 2.2) +- `beforeRouteUpdate` (added in 2.2+) - `beforeRouteLeave` ``` js diff --git a/docs/en/essentials/navigation.md b/docs/en/essentials/navigation.md index 7c421e938..03d79b0ea 100644 --- a/docs/en/essentials/navigation.md +++ b/docs/en/essentials/navigation.md @@ -30,8 +30,7 @@ router.push({ name: 'user', params: { userId: 123 }}) router.push({ path: 'register', query: { plan: 'private' }}) ``` -**Note**: `params` are ignored if a `path` is provided, which is not the case for `query`, as shown in the example above. -Instead, you need to provide the `name` of the route or manually specify the whole `path` with any parameter: +**Note**: `params` are ignored if a `path` is provided, which is not the case for `query`, as shown in the example above. Instead, you need to provide the `name` of the route or manually specify the whole `path` with any parameter: ```js const userId = 123 diff --git a/docs/fr/advanced/navigation-guards.md b/docs/fr/advanced/navigation-guards.md index f7f578dda..fdc3cb7bd 100644 --- a/docs/fr/advanced/navigation-guards.md +++ b/docs/fr/advanced/navigation-guards.md @@ -77,7 +77,7 @@ Ces interceptions ont exactement le même effet que les interceptions globales d Enfin, vous pouvez directement définir une interception de navigation a l'intérieur du composant lui-même (celui passer à la configuration du routeur) avec les options suivantes : - `beforeRouteEnter` -- `beforeRouteUpdate` (ajouté dans la 2.2) +- `beforeRouteUpdate` (ajouté dans la 2.2+) - `beforeRouteLeave` ``` js diff --git a/docs/fr/essentials/navigation.md b/docs/fr/essentials/navigation.md index 4ed5a6b19..7bd04c2c8 100644 --- a/docs/fr/essentials/navigation.md +++ b/docs/fr/essentials/navigation.md @@ -30,8 +30,7 @@ router.push({ name: 'user', params: { userId: 123 }}) router.push({ path: 'register', query: { plan: 'private' }}) ``` -**Note :** `params` est ignoré si `path` est fourni, ce qui n'est pas le cas pour `query`, comme démontré dans l'exemple ci-dessous. -À la place, vous devez fournir le `name` de la route ou manuellement spécifier le `path` complet avec tous les paramètres : +**Note :** `params` est ignoré si `path` est fourni, ce qui n'est pas le cas pour `query`, comme démontré dans l'exemple ci-dessous. À la place, vous devez fournir le `name` de la route ou manuellement spécifier le `path` complet avec tous les paramètres : ```js const userId = 123 From 1f4bec069ab3c2df08a36ddcbe067c2eaf2d1f0d Mon Sep 17 00:00:00 2001 From: Bruno Lesieur Date: Mon, 28 Aug 2017 09:02:27 +0200 Subject: [PATCH 14/17] Translate navigation.md new note. Signed-off-by: Bruno Lesieur --- docs/fr/advanced/navigation-guards.md | 2 +- docs/fr/essentials/navigation.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/fr/advanced/navigation-guards.md b/docs/fr/advanced/navigation-guards.md index fdc3cb7bd..4843a3d6c 100644 --- a/docs/fr/advanced/navigation-guards.md +++ b/docs/fr/advanced/navigation-guards.md @@ -111,7 +111,7 @@ Cependant, vous pouvez accéder à l'instance en passant dans la fonction de rap ``` js beforeRouteEnter (to, from, next) { next(vm => { - // accèr à l'instance du composant via `vm` + // accès à l'instance du composant via `vm` }) } ``` diff --git a/docs/fr/essentials/navigation.md b/docs/fr/essentials/navigation.md index 7bd04c2c8..37dcea34d 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:** If the destination is the same as the current route and only params are changing (eg: going from one profile to another `/users/1` -> `/users/2`), you will have to use [beforeRouteUpdate](./dynamic-matching.html#reacting-to-params-changes) to react to changes (eg: fetching the user information). +**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#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?)` From 4d726ba4dfb01a4645899f8992c2d565768607c0 Mon Sep 17 00:00:00 2001 From: Eduardo San Martin Morote Date: Mon, 28 Aug 2017 10:52:02 +0200 Subject: [PATCH 15/17] Update navigation.md --- docs/fr/essentials/navigation.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/fr/essentials/navigation.md b/docs/fr/essentials/navigation.md index 37dcea34d..72949fa51 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#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?)` From 99c1a3ad2ba443ac016896fcf46b0ba690ae9802 Mon Sep 17 00:00:00 2001 From: Bruno Lesieur Date: Tue, 12 Sep 2017 13:14:36 +0200 Subject: [PATCH 16/17] Add info for IIS Signed-off-by: Bruno Lesieur --- docs/fr/essentials/getting-started.md | 2 +- docs/fr/essentials/history-mode.md | 12 ++++-------- 2 files changed, 5 insertions(+), 9 deletions(-) diff --git a/docs/fr/essentials/getting-started.md b/docs/fr/essentials/getting-started.md index 05e3cf2c7..0e744ff1d 100644 --- a/docs/fr/essentials/getting-started.md +++ b/docs/fr/essentials/getting-started.md @@ -2,7 +2,7 @@ > Nous utiliserons [ES2015](https://github.com/lukehoban/es6features) dans les exemples de code dans ce guide. -Créer une application monopage avec Vue.js + 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 : +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 : > 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). diff --git a/docs/fr/essentials/history-mode.md b/docs/fr/essentials/history-mode.md index d5b0dad77..96bdfd6ad 100644 --- a/docs/fr/essentials/history-mode.md +++ b/docs/fr/essentials/history-mode.md @@ -70,6 +70,9 @@ Pour Node.js avec Express, vous pouvez utiliser le [middleware connect-history-a #### Internet Information Services (IIS) +1. Instaler [IIS UrlRewrite](https://www.iis.net/downloads/microsoft/url-rewrite) +2. Créer un fichier `web.config` dans le répertoire racine de votre site avec le contenu suivant : + ```xml @@ -82,17 +85,10 @@ Pour Node.js avec Express, vous pouvez utiliser le [middleware connect-history-a - + - - - - - - - ``` From 1f00e7e477e58ae0dacfa4cc7bdc012347a21a92 Mon Sep 17 00:00:00 2001 From: Bruno Lesieur Date: Tue, 12 Sep 2017 13:17:54 +0200 Subject: [PATCH 17/17] https for Vue documentation link --- docs/fr/advanced/transitions.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/fr/advanced/transitions.md b/docs/fr/advanced/transitions.md index e386deb23..5d998ddb8 100644 --- a/docs/fr/advanced/transitions.md +++ b/docs/fr/advanced/transitions.md @@ -8,7 +8,7 @@ Vu que `` est essentiellement un composant dynamique, on peut lui a     ``` -[Tout à propos de ``](http://fr.vuejs.org/v2/guide/transitions.html) fonctionne également ici de la même manière. +[Tout à propos de ``](https://fr.vuejs.org/v2/guide/transitions.html) fonctionne également ici de la même manière. ### Transition par route