Skip to content

Commit 5d7afbe

Browse files
LorisCposva
andauthoredJan 27, 2022
docs: update french router-link api (#3698)
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com>
1 parent 2aca03e commit 5d7afbe

File tree

1 file changed

+25
-1
lines changed

1 file changed

+25
-1
lines changed
 

‎docs/fr/api/README.md

+25-1
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,31 @@ sidebar: auto
1414

1515
- Dans le mode historique HTML5, `router-link` interceptera l'évènement du clic, comme ça le navigateur n'essaiera pas de rafraichir la page.
1616

17-
- En utilisant l'option `base` dans le mode historique HTML5, vous n'avez pas besoin
17+
- En utilisant l'option `base` dans le mode historique HTML5, vous n'avez pas besoin de l'inclure dans la prop `to`
18+
19+
### `v-slot` API (3.1.0+)
20+
21+
`router-link` est fortement personnalisable via une [slot avec portée](https://fr.vuejs.org/v2/guide/components-slots.html#Slots-avec-portee). C'est une API qui cible principalement les créateurs de bibliothèque, mais elle peut aussi servir pour les développeurs, le plus souvent dans des composants personnalisés tel qu'un _NavLink_ et autre.
22+
23+
**Lors de l'utilisation `v-slot` API, il faut obligatoirement passer un composant enfant unique au `router-link`**. Si vous ne le faites pas, `router-link` va entourer ses enfants avec une balise `span`.
24+
25+
```html
26+
<router-link
27+
to="/about"
28+
custom
29+
v-slot="{ href, route, navigate, isActive, isExactActive }"
30+
>
31+
<NavLink :active="isActive" :href="href" @click="navigate"
32+
>{{ route.fullPath }}</NavLink
33+
>
34+
</router-link>
35+
```
36+
37+
- `href`: URL résolue. Ce serait l'attribut `href` d'une balise `a`
38+
- `route`: localisation normalisée et résolue
39+
- `navigate`: fonction pour lancer la navigation. **En cas de nécessité il va automatiquement empêcher les événements**, de la même façon que `router-link`
40+
- `isActive`: `true` si [active class](#active-class) devrait être appliqué. Permet d'appliquer une classe arbitraire
41+
- `isExactActive`: `true` si [exact active class](#exact-active-class) devrait être appliqué. Permet d'appliquer une classe arbitraire
1842

1943
### Appliquer la classe active à l'élément extérieur
2044

0 commit comments

Comments
 (0)
Please sign in to comment.