|
6 | 6 |
|
7 | 7 | - 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é.
|
8 | 8 |
|
9 |
| -- 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. |
| 9 | +- 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. |
10 | 10 |
|
11 | 11 | - En utilisant l'option `base` dans le mode historique HTML5, vous n'avez pas besoin de l'inclure dans les props `to` des URLs.
|
12 | 12 |
|
|
18 | 18 |
|
19 | 19 | - requis
|
20 | 20 |
|
21 |
| - Désigne la route cible du lien. Lorsqu'il est cliqué, la valeur de la prop `to` va être passé 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. |
| 21 | + 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. |
22 | 22 |
|
23 | 23 | ``` html
|
24 | 24 | <!-- chaîne litérale -->
|
25 | 25 | <router-link to="home">Accueil</router-link>
|
26 | 26 | <!-- rend -->
|
27 | 27 | <a href="home">Accueil</a>
|
28 | 28 |
|
29 |
| - <!-- expression JavaScript en utilisant v-bind --> |
| 29 | + <!-- expression JavaScript en utilisant `v-bind` --> |
30 | 30 | <router-link v-bind:to="'home'">Accueil</router-link>
|
31 | 31 |
|
32 |
| - <!-- Omettre v-bind est ok, tout comme autre prop --> |
| 32 | + <!-- Omettre `v-bind` est ok, tout comme une autre prop --> |
33 | 33 | <router-link :to="'home'">Accueil</router-link>
|
34 | 34 |
|
35 | 35 | <!-- pareil qu'au dessus -->
|
|
38 | 38 | <!-- route nommée -->
|
39 | 39 | <router-link :to="{ name: 'user', params: { userId: 123 }}">Utilisateur</router-link>
|
40 | 40 |
|
41 |
| - <!-- avec une requête, résulte en /register?plan=private --> |
| 41 | + <!-- avec une requête, résulte en `/register?plan=private` --> |
42 | 42 | <router-link :to="{ path: 'register', query: { plan: 'private' }}">S'enregistrer</router-link>
|
43 | 43 | ```
|
44 | 44 |
|
|
72 | 72 |
|
73 | 73 | - défaut : `"a"`
|
74 | 74 |
|
75 |
| - Parfois, on veut que `<router-link>` soit rendu avec un tag différent, ex : `<li>`. On peut alors utiliser la prop `tag` pour modifier le tag qui sera rendu, et il écoutera toujours aux événements de clic pour la navigation |
| 75 | + Parfois, on veut que `<router-link>` soit rendu avec un tag différent, ex : `<li>`. 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 |
76 | 76 |
|
77 | 77 | ``` html
|
78 | 78 | <router-link to="/foo" tag="li">foo</router-link>
|
|
96 | 96 |
|
97 | 97 | Le comportement par défaut de la correspondance de classe active est une **correspondance inclusive**. Par exemple, `<router-link to="/a">` vera cette classe appliquée tant que le chemin courant commencera par `/a/` ou `/a`.
|
98 | 98 |
|
99 |
| - Une conséquence de cela est que `<router-link to="/">` sera actif pour toutes les routes ! Pour forcer le lien dans un "mode correspondance exacte", utilisez la prop `exact`. |
| 99 | + Une conséquence de cela est que `<router-link to="/">` sera actif pour toutes les routes ! Pour forcer le lien dans un « mode correspondance exacte », utilisez la prop `exact`. |
100 | 100 |
|
101 | 101 | ``` html
|
102 |
| - <!-- ce lien sera uniquement actif à / --> |
| 102 | + <!-- ce lien sera uniquement actif à `/` --> |
103 | 103 | <router-link to="/" exact>
|
104 | 104 | ```
|
105 | 105 |
|
|
113 | 113 |
|
114 | 114 | - défaut : `'click'`
|
115 | 115 |
|
116 |
| - Spécifie les événement(s) que peuvent lancer la navigation de lien. |
| 116 | + Spécifie les évènement(s) que peu(ven)t lancer la navigation de lien. |
117 | 117 |
|
118 | 118 | - **exact-active-class**
|
119 | 119 |
|
|
127 | 127 |
|
128 | 128 | ### Appliquer la classe active à l'élément extérieur
|
129 | 129 |
|
130 |
| -Parfois, on voudrait que la classe active soit appliquer à un élément extérieur au lieu de l'élément `<a>` lui-même, dans ce cas, vous pouvez faire le rendu de cet élément extérieur en utilisant `<router-link>` et en entourant le tag `<a>` : |
| 130 | +Parfois, on voudrait que la classe active soit appliquée à un élément extérieur au lieu de l'élément `<a>` lui-même, dans ce cas, vous pouvez faire le rendu de cet élément extérieur en utilisant `<router-link>` et en entourant le tag `<a>` : |
131 | 131 |
|
132 | 132 | ``` html
|
133 | 133 | <router-link tag="li" to="/foo">
|
|
0 commit comments