diff --git a/docs/fr/SUMMARY.md b/docs/fr/SUMMARY.md index 8c11415e9..32e1139ff 100644 --- a/docs/fr/SUMMARY.md +++ b/docs/fr/SUMMARY.md @@ -8,11 +8,11 @@ - 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) + - [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) - [Passing Props to Route Components (En)](essentials/passing-props.md) - [HTML5 History Mode (En)](essentials/history-mode.md) - Avancé @@ -20,13 +20,22 @@ - [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 + - [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) - - [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/scroll-behavior.md b/docs/fr/advanced/scroll-behavior.md index 2d176188c..3215b18ff 100644 --- a/docs/fr/advanced/scroll-behavior.md +++ b/docs/fr/advanced/scroll-behavior.md @@ -20,11 +20,11 @@ La fonction `scrollBehavior` reçoit les objets de route `to` et `from`. Le troi 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 }` +- `{ selector: string, offset? : { x: number, y: number }}` (offset seulement supporté pour les versions 2.6.0+) Si une valeur équivalente à `false` ou un objet vide est retourné, aucun défilement ne sera produit. -Par exemple : +Par exemple : ``` js scrollBehavior (to, from, savedPosition) { @@ -53,6 +53,7 @@ scrollBehavior (to, from, savedPosition) { if (to.hash) { return { selector: to.hash + // , offset: { x: 0, y: 10 } } } } diff --git a/docs/fr/api/options.md b/docs/fr/api/options.md index ee608d967..5ec49d1ce 100644 --- a/docs/fr/api/options.md +++ b/docs/fr/api/options.md @@ -18,6 +18,10 @@ 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 } ``` @@ -86,3 +90,13 @@ - 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. + +### 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 rendu côté serveur et à besoin de fonctionner dans IE9, car le mode hash ne fonctionne pas avec du SSR. diff --git a/docs/fr/api/router-instance.md b/docs/fr/api/router-instance.md index 2f3d98562..7eff99da3 100644 --- a/docs/fr/api/router-instance.md +++ b/docs/fr/api/router-instance.md @@ -56,6 +56,8 @@ } ``` + - `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`](https://router.vuejs.org/en/api/router-link.html#props)) - **router.addRoutes(routes)** diff --git a/docs/fr/essentials/history-mode.md b/docs/fr/essentials/history-mode.md index 36e1a1b2e..04c74bdcb 100644 --- a/docs/fr/essentials/history-mode.md +++ b/docs/fr/essentials/history-mode.md @@ -44,6 +44,34 @@ location / { For Node.js/Express, consider using [connect-history-api-fallback middleware](https://github.com/bripkens/connect-history-api-fallback). +#### Internet Information Services (IIS) +``` + + + + + + + + + + + + + + + + + + + + + + + + +``` + ## 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: diff --git a/docs/fr/essentials/named-routes.md b/docs/fr/essentials/named-routes.md index 8e03b5dd6..6780b0297 100644 --- a/docs/fr/essentials/named-routes.md +++ b/docs/fr/essentials/named-routes.md @@ -1,12 +1,12 @@ -# 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).* +# Routes nommées -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: +Parfois il est plus pratique d'identifer une route avec un nom, tout particulièrement quand on souhaite attacher cette route ou exécuter des actions de navigation. Vous pouvez donner un nom à une route dans les options `routes` pendant la création de l'instance du routeur : ``` js const router = new VueRouter({ routes: [ { - path: '/user/:userId', + path: '/utilisateur/:userId', name: 'user', component: User } @@ -14,19 +14,18 @@ const router = new VueRouter({ }) ``` -To link to a named route, you can pass an object to the `router-link` -component's `to` prop: +Pour attacher une route nommée, vous pouvez passer un objet à la prop `to` du composant `router-link` : ``` html -User +Utilisateur ``` -This is the exact same object used programatically with `router.push()`: +C'est exactement le même objet à utiliser programmatiquement avec `router.push()` : ``` js router.push({ name: 'user', params: { userId: 123 }}) ``` -In both cases, the router will navigate to the path `/user/123`. +Dans les deux cas, le routeur va naviguer vers le chemin `/utilisateur/123`. -Full example [here](https://github.com/vuejs/vue-router/blob/dev/examples/named-routes/app.js). +Un exemple complet se trouve [ici](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 index 3a28369d7..844fe8515 100644 --- a/docs/fr/essentials/named-views.md +++ b/docs/fr/essentials/named-views.md @@ -1,6 +1,6 @@ -# 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).* +# Vues nommées -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. +Parfois vous avez besoin d'afficher différentes vues en même temps plutôt que de les imbriquer, c.-à-d. créer un affichage avec une vue `sidebar` et une vue `main` par exemple. C'est ici que les routes nommées entre en jeu. Au lieu d'avoir une seule balise de vue, vous pouvez en avoir une multitude et donner à chacune d'entre elle un nom. Un `router-view` sans nom aura comme nom par défaut : `default`. ``` html @@ -8,8 +8,7 @@ Sometimes you need to display multiple views at the same time instead of nesting ``` -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: +Une vue est rendue en utilisant un composant, donc de multiples vues nécessites de multiples composants pour une même route. Assurez-vous d'utiliser l'option `components` (avec un s) : ``` js const router = new VueRouter({ @@ -26,5 +25,4 @@ const router = new VueRouter({ }) ``` -A working demo of this example can be found -[here](https://jsfiddle.net/posva/6du90epg/). +Une démo de cet exemple peut-être trouvée ici : [ici](https://jsfiddle.net/posva/6du90epg/). diff --git a/docs/fr/essentials/navigation.md b/docs/fr/essentials/navigation.md index af7cd6477..7008c9574 100644 --- a/docs/fr/essentials/navigation.md +++ b/docs/fr/essentials/navigation.md @@ -1,71 +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).* +# Navigation programmatique -Aside from using `` to create anchor tags for declarative navigation, we can do this programmatically using the router's instance methods. +En complément du l'utilisation de `` pour créer des balises ancres pour la navigation déclarative, nous pouvons le faire de manière programmatique en utilisant les méthodes de l'instance du routeur. #### `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`.** +** Note : Dans une instance Vue, vous pouvez accéder à l'instance du routeur via `$router`. Vous pouvez donc appeler `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. +Pour naviguer vers une URL différente, utilisez `router.push`. Cette méthode ajoute une nouvelle entrée dans la pile de l'historique. Ainsi quand un utilisateur clique sur le bouton retour de son navigateur, il retournera à l'URL précédente. -This is the method called internally when you click a ``, so clicking `` is the equivalent of calling `router.push(...)`. +Cette méthode est appelée en interne quand vous cliquez sur ``, donc cliquer sur `` est équivalent à appeler `router.push(...)`. -| Declarative | Programmatic | +| Déclarative | Programmatique | |-------------|--------------| | `` | `router.push(...)` | -The argument can be a string path, or a location descriptor object. Examples: +L'argument peut être une chaîne de caractère représentant un chemin, ou un objet de description de destination. Des exemples : ``` js -// literal string path +// chaîne de caractère représentant un chemin router.push('home') -// object +// objet router.push({ path: 'home' }) -// named route +// route nommée router.push({ name: 'user', params: { userId: 123 }}) -// with query, resulting in /register?plan=private +// avec une requête « query » résultant de `/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. +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). #### `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. +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. -| Declarative | Programmatic | +| Déclarative | Programmatique | |-------------|--------------| | `` | `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)`. +Cette méthode prend un seul nombre en tant que paramètre. Celui-ci indique de combien d'entrée vers l'avant ou vers l'arrière il faut naviguer dans la pile de l'historique, de la même manière qu'avec `window.history.go(n)`. -Examples +Des exemples ``` js -// go forward by one record, the same as history.forward() +// avancer d'une entrée, identique à `history.forward()` router.go(1) -// go back by one record, the same as history.back() +// retourner d'une entrée en arrière, identique à `history.back()` router.go(-1) -// go forward by 3 records +// avancer de trois entrées router.go(3) -// fails silently if there aren't that many records. +// échoue silencieusement s'il n'y a pas assez d'entrées. router.go(-100) router.go(100) ``` -#### History Manipulation +#### Manipulation de l'historique -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. +Vous avez peut être remarqué que `router.push`, `router.replace` et `router.go` sont des équivalent de [`window.history.pushState`, `window.history.replaceState` et `window.history.go`](https://developer.mozilla.org/fr-FR/docs/Web/API/History), et qu'ils imitent les APIs de `window.history`. -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. +Donc, si vous utilisez déjà l'[API History des navigateurs](https://developer.mozilla.org/fr-FR/docs/Web/API/History_API), manipuler l'historique sera très simple avec vue-router. -It is worth mentioning that vue-router navigation methods (`push`, `replace`, `go`) work consistently in all router modes (`history`, `hash` and `abstract`). +Il n'est pas nécessaire de préciser que les méthodes de navigation (`push`, `replace`, `go`) fonctionnent de la même manière dans tous les modes de routage (`history`, `hash` and `abstract`). diff --git a/docs/fr/essentials/nested-routes.md b/docs/fr/essentials/nested-routes.md index fc76d4b3c..998dc05d1 100644 --- a/docs/fr/essentials/nested-routes.md +++ b/docs/fr/essentials/nested-routes.md @@ -1,21 +1,21 @@ -# 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).* +# Routes imbriquées -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: +Les vrais interfaces utilisateurs d'application sont faites de composants imbriqués à de multiples niveaux de profondeur. Il est aussi très commun que les segments d'URLs correspondent à une certaine structure de composants imbriqués, par exemple : ``` -/user/foo/profile /user/foo/posts -+------------------+ +-----------------+ -| User | | User | -| +--------------+ | | +-------------+ | -| | Profile | | +------------> | | Posts | | -| | | | | | | | -| +--------------+ | | +-------------+ | -+------------------+ +-----------------+ +/utilisateur/foo/profil /utilisateur/foo/billets ++---------------------+ +--------------------+ +| User | | User | +| +-----------------+ | | +----------------+ | +| | Profile | | +------------> | | Posts | | +| | | | | | | | +| +-----------------+ | | +----------------+ | ++---------------------+ +--------------------+ ``` -With `vue-router`, it is very simple to express this relationship using nested route configurations. +Avec `vue-router`, il est vraiment très simple d'exprimer cette relation en utilisant des configurations de route imbriquées. -Given the app we created in the last chapter: +Reprenons l'application créée au chapitre précédent : ``` html
@@ -25,46 +25,45 @@ Given the app we created in the last chapter: ``` js const User = { - template: '
User {{ $route.params.id }}
' + template: '
Utilisateur {{ $route.params.id }}
' } const router = new VueRouter({ routes: [ - { path: '/user/:id', component: User } + { path: '/utilisateur/:id', component: User } ] }) ``` -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: +Ici le `` est une balise de premier niveau. Il fait le rendu des composants qui concordent avec une route de premier niveau. De la même façon, un composant de rendu peut contenir également sa propre balise `` imbriquée. Par exemple, ajoutons en une à l'intérieur du template du composant `User` : ``` js const User = { template: `
-

User {{ $route.params.id }}

+

Utilisateur {{ $route.params.id }}

` } ``` -To render components into this nested outlet, we need to use the `children` -option in `VueRouter` constructor config: +Pour faire le rendu de composants à l'intérieur des balises imbriquées, nous avons besoin d'utiliser l'option `children` dans la configuration du constructeur de `VueRouter` : ``` js const router = new VueRouter({ routes: [ - { path: '/user/:id', component: User, + { path: '/utilisateur/:id', component: User, children: [ { - // UserProfile will be rendered inside User's - // when /user/:id/profile is matched + // `UserProfile` va être rendu à l'intérieur du `` de `User` + // quand `/utilisateur/:id/profil` concorde path: 'profile', component: UserProfile }, { - // UserPosts will be rendered inside User's - // when /user/:id/posts is matched + // `UserPosts` va être rendu à l'intérieur du `` de `User` + // quand `/utilisateur/:id/billets` concorde path: 'posts', component: UserPosts } @@ -74,27 +73,27 @@ const router = new VueRouter({ }) ``` -**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.** +**Notez que les chemins imbriqués commençant par `/` vont être traités comme des chemins partant de la racine. Cela vous permet d'adresser des composants imbriqués sans avoir à utiliser une URL imbriquée.** -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. +Comme vous pouvez le voir, l'option `children` n'est qu'un autre tableau d'objet de configuration de route comme dans `routes`. Et donc, vous pouvez garder les vues imbriquées au plus près de vos besoins. -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: +À ce niveau, avec la configuration ci-dessus, quand vous visitez `/utilisateur/foo`, rien ne sera rendu dans la partie `User`, car aucune sous route ne concorde. Peut-être voudriez vous afficher quelque chose ici. Dans ce cas, vous pouvez fournir une sous route vide : ``` js const router = new VueRouter({ routes: [ { - path: '/user/:id', component: User, + path: '/utilisateur/:id', component: User, children: [ - // UserHome will be rendered inside User's - // when /user/:id is matched + // `UserProfile` va être rendu à l'intérieur du `` de `User` + // quand `/utilisateur/:id` concorde { path: '', component: UserHome }, - // ...other sub routes + // ...autres sous routes ] } ] }) ``` -A working demo of this example can be found [here](http://jsfiddle.net/yyx990803/L7hscd8h/). +Une démo de fonctionnement de cet exemple peut-être trouvée [ici](http://jsfiddle.net/yyx990803/L7hscd8h/). diff --git a/docs/fr/essentials/redirect-and-alias.md b/docs/fr/essentials/redirect-and-alias.md index 91033aefb..bcd9954dd 100644 --- a/docs/fr/essentials/redirect-and-alias.md +++ b/docs/fr/essentials/redirect-and-alias.md @@ -1,8 +1,8 @@ -# 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).* +# Redirection et alias -### Redirect +### Redirection -Redirecting is also done in the `routes` configuration. To redirect from `/a` to `/b`: +Les redirections peuvent aussi être faites depuis la configuration de `routes`. Pour rediriger `/a` vers `/b` : ``` js const router = new VueRouter({ @@ -12,7 +12,7 @@ const router = new VueRouter({ }) ``` -The redirect can also be targeting a named route: +La redirection peut également être effectuée en ciblant une route nommée : ``` js const router = new VueRouter({ @@ -22,28 +22,28 @@ const router = new VueRouter({ }) ``` -Or even use a function for dynamic redirecting: +Ou on peut même utiliser une fonction pour les redirections dynamiques : ``` js const router = new VueRouter({ routes: [ { path: '/a', redirect: to => { - // the function receives the target route as the argument - // return redirect path/location here. + // la fonction reçoit la route cible en tant qu'argument + // retourné le chemin vers la nouvelle route ici. }} ] }) ``` -For other advanced usage, checkout the [example](https://github.com/vuejs/vue-router/blob/dev/examples/redirect/app.js). +Pour d'autres utilisations avancées, jetez un œil à cet [exemple](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? +Une redirection signifie que si l'utilisateur visite `/a`, l'URL va être remplacée par `/b` et concordé avec `/b`. Mais qu'est-ce qu'un alias ? -**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`.** +** Un alias de `/a` en tant que `/b` signifie que lorsque l'utilisateur va visiter `/b`, l'URL vas rester `/b`, mais la concordance va se faire comme si l'utilisateur visitait `/a`.** -The above can be expressed in the route configuration as: +La phase du dessus peut être exprimée dans la configuration de la route de la manière suivante : ``` js const router = new VueRouter({ @@ -53,6 +53,6 @@ const router = new VueRouter({ }) ``` -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. +Un alias vous donne la liberté d'associer une structure d'interface utilisateur à une URL arbitraire, au lieu d'être contraint par une configuration de structure. -For advanced usage, checkout the [example](https://github.com/vuejs/vue-router/blob/dev/examples/route-alias/app.js). +Pour d'autres utilisations avancées, jetez un œil à cet [exemple](https://github.com/vuejs/vue-router/blob/dev/examples/route-alias/app.js).