You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/en/essentials/named-views.md
+4-6
Original file line number
Diff line number
Diff line change
@@ -1,15 +1,14 @@
1
-
# Named Views (En) <br><br> *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).*
1
+
# Vues nommées
2
2
3
-
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.
3
+
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`.
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
12
-
an s) option:
11
+
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) :
13
12
14
13
```js
15
14
constrouter=newVueRouter({
@@ -26,5 +25,4 @@ const router = new VueRouter({
26
25
})
27
26
```
28
27
29
-
A working demo of this example can be found
30
-
[here](https://jsfiddle.net/posva/6du90epg/).
28
+
Une démo de cet exemple peut-être trouvée ici : [ici](https://jsfiddle.net/posva/6du90epg/).
# Nested Routes (En) <br><br> *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).*
1
+
# Routes imbriquées
2
2
3
-
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:
3
+
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 :
4
4
5
5
```
6
-
/user/foo/profile /user/foo/posts
7
-
+------------------+ +-----------------+
8
-
| User | | User |
9
-
| +--------------+ | | +-------------+ |
10
-
| | Profile | | +------------> | | Posts | |
11
-
| | | | | | | |
12
-
| +--------------+ | | +-------------+ |
13
-
+------------------+ +-----------------+
6
+
/utilisateur/foo/profil/utilisateur/foo/billets
7
+
+---------------------+ +--------------------+
8
+
| User | | User |
9
+
| +-----------------+ | | +----------------+ |
10
+
| | Profile | | +------------> | | Posts | |
11
+
| | | | | | | |
12
+
| +-----------------+ | | +----------------+ |
13
+
+---------------------+ +--------------------+
14
14
```
15
15
16
-
With`vue-router`, it is very simple to express this relationship using nested route configurations.
16
+
Avec`vue-router`, il est vraiment très simple d'exprimer cette relation en utilisant des configurations de route imbriquées.
17
17
18
-
Given the app we created in the last chapter:
18
+
Reprenons l'application créée au chapitre précédent :
19
19
20
20
```html
21
21
<divid="app">
@@ -25,46 +25,45 @@ Given the app we created in the last chapter:
The `<router-view>`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 `<router-view>`. For example, if we add one inside the `User`component's template:
38
+
Ici le `<router-view>`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 `<router-view>` imbriquée. Par exemple, ajoutons en une à l'intérieur du template du composant `User` :
39
39
40
40
```js
41
41
constUser= {
42
42
template:`
43
43
<div class="user">
44
-
<h2>User {{ $route.params.id }}</h2>
44
+
<h2>Utilisateur {{ $route.params.id }}</h2>
45
45
<router-view></router-view>
46
46
</div>
47
47
`
48
48
}
49
49
```
50
50
51
-
To render components into this nested outlet, we need to use the `children`
52
-
option in `VueRouter` constructor config:
51
+
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` :
53
52
54
53
```js
55
54
constrouter=newVueRouter({
56
55
routes: [
57
-
{ path:'/user/:id', component: User,
56
+
{ path:'/utilisateur/:id', component: User,
58
57
children: [
59
58
{
60
-
// UserProfile will be rendered inside User's <router-view>
61
-
//when /user/:id/profile is matched
59
+
//`UserProfile` va être rendu à l'intérieur du `<router-view>` de `User`
60
+
//quand `/utilisateur/:id/profil` concorde
62
61
path:'profile',
63
62
component: UserProfile
64
63
},
65
64
{
66
-
// UserPosts will be rendered inside User's <router-view>
67
-
//when /user/:id/posts is matched
65
+
//`UserPosts` va être rendu à l'intérieur du `<router-view>` de `User`
66
+
//quand `/utilisateur/:id/billets` concorde
68
67
path:'posts',
69
68
component: UserPosts
70
69
}
@@ -74,27 +73,27 @@ const router = new VueRouter({
74
73
})
75
74
```
76
75
77
-
**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.**
76
+
**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.**
78
77
79
-
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.
78
+
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.
80
79
81
-
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:
80
+
À 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 :
82
81
83
82
```js
84
83
constrouter=newVueRouter({
85
84
routes: [
86
85
{
87
-
path:'/user/:id', component: User,
86
+
path:'/utilisateur/:id', component: User,
88
87
children: [
89
-
//UserHome will be rendered inside User's <router-view>
90
-
//when /user/:id is matched
88
+
//`UserProfile` va être rendu à l'intérieur du `<router-view>` de `User`
89
+
//quand `/utilisateur/:id` concorde
91
90
{ path:'', component: UserHome },
92
91
93
-
// ...other sub routes
92
+
// ...autres sous routes
94
93
]
95
94
}
96
95
]
97
96
})
98
97
```
99
98
100
-
A working demo of this example can be found [here](http://jsfiddle.net/yyx990803/L7hscd8h/).
99
+
Une démo de fonctionnement de cet exemple peut-être trouvée [ici](http://jsfiddle.net/yyx990803/L7hscd8h/).
# Redirect and Alias (En) <br><br> *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).*
1
+
# Redirection et alias
2
2
3
-
### Redirect
3
+
### Redirection
4
4
5
-
Redirecting is also done in the `routes` configuration. To redirect from `/a`to`/b`:
5
+
Les redirections peuvent aussi être faites depuis la configuration de `routes`. Pour rediriger `/a`vers`/b`:
6
6
7
7
```js
8
8
constrouter=newVueRouter({
@@ -12,7 +12,7 @@ const router = new VueRouter({
12
12
})
13
13
```
14
14
15
-
The redirect can also be targeting a named route:
15
+
La redirection peut également être effectuée en ciblant une route nommée :
16
16
17
17
```js
18
18
constrouter=newVueRouter({
@@ -22,28 +22,28 @@ const router = new VueRouter({
22
22
})
23
23
```
24
24
25
-
Or even use a function for dynamic redirecting:
25
+
Ou on peut même utiliser une fonction pour les redirections dynamiques :
26
26
27
27
```js
28
28
constrouter=newVueRouter({
29
29
routes: [
30
30
{ path:'/a', redirect:to=> {
31
-
//the function receives the target route as the argument
32
-
//return redirect path/location here.
31
+
//la fonction reçoit la route cible en tant qu'argument
32
+
//retourné le chemin vers la nouvelle route ici.
33
33
}}
34
34
]
35
35
})
36
36
```
37
37
38
-
For other advanced usage, checkout the [example](https://github.com/vuejs/vue-router/blob/dev/examples/redirect/app.js).
38
+
Pour d'autres utilisations avancées, jetez un œil à cet [exemple](https://github.com/vuejs/vue-router/blob/dev/examples/redirect/app.js).
39
39
40
40
### Alias
41
41
42
-
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?
42
+
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?
43
43
44
-
**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`.**
44
+
** 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`.**
45
45
46
-
The above can be expressed in the route configuration as:
46
+
La phase du dessus peut être exprimée dans la configuration de la route de la manière suivante :
47
47
48
48
```js
49
49
constrouter=newVueRouter({
@@ -53,6 +53,6 @@ const router = new VueRouter({
53
53
})
54
54
```
55
55
56
-
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.
56
+
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.
57
57
58
-
For advanced usage, checkout the [example](https://github.com/vuejs/vue-router/blob/dev/examples/route-alias/app.js).
58
+
Pour d'autres utilisations avancées, jetez un œil à cet [exemple](https://github.com/vuejs/vue-router/blob/dev/examples/route-alias/app.js).
0 commit comments