Qu'est-ce que <router-view: key = "$ route.fullPath">?
Je suis complètement nouveau sur Vue.js et je pense que je comprends un peu comment un routeur fonctionne avec des choses comme:
<router-link to="/">
Mais je ne comprends pas vraiment ce que fait la ligne suivante:
<router-view :key="$route.fullPath"></router-view>
Je pense que router-view garantit à lui seul le contenu, mais que signifie l'élément clé?
Il peut également être utilisé pour forcer le remplacement d'un élément/composant au lieu de le réutiliser. Cela peut être utile lorsque vous souhaitez:
- Déclencher correctement les hooks de cycle de vie d'un composant
- Transitions de déclenchement
$route.fullPath est défini comme
L'URL résolue complète, y compris la requête et le hachage.
Si vous liez key à $route.fullPath, il sera toujours "forcer un remplacement" du <router-view> élément/composant chaque fois qu'un événement de navigation se produit.
Comme mentionné ci-dessus, cela est très probablement fait afin de déclencher une transition/animation.