Explication détaillée de l'attribut router-link dans vue

L'attribut router-link dans vue a les valeurs d'attribut suivantes : to est équivalent à la balise herf pour ajouter du contenu de saut, replace est utilisé pour ne pas laisser d'enregistrement d'historique lors du changement de page, et la balise restitue le lien de routeur dans le balise correspondante. Attendez

Dans vue, vue.js et vue-router peuvent être combinés pour implémenter une application simple d'une seule page, dans laquelle b988a8fd72e5e0e42afffd18f951b277 réaliser différentes commutations de contenu HTML. Ensuite, je présenterai cet attribut en détail dans l'article, qui a une certaine valeur de référence et j'espère qu'il sera utile à tout le monde.

[Cours recommandés : Tutoriel Vue]

balise router-link

Dans la version vue1.0, la balise a est toujours utilisée pour implémenter la fonction de saut de lien, mais l'adresse du lien est différente de celle en HTML. utilise les propriétés v-link pour contrôler. Cependant, dans la version 2.0, la balise a a été remplacée par l'attribut rount-link, mais elle sera toujours rendue dans la balise a lorsqu'elle sera affichée sur la page. Ensuite, l'utilisation de chaque valeur dans cet attribut sera présentée en détail

Explication détaillée de la valeur de l'attribut du lien de routeur

(1) Valeur de l'attribut ":to"

Cette valeur d'attribut est équivalente à l'attribut "herf" dans la balise a, et le contenu suivant est le contenu du lien de saut

<router-link :to="http://www.php.cn/">PHP中文网</router-link>

est équivalent à

<a href="http://www.php.cn/">PHP中文网</a>

(2) valeur de l'attribut "replace"

L'objectif principal de l'ajout de la valeur de l'attribut replace dans la balise routeur-link est de ne pas laisser d'historique lors du changement de page

<router-link :to="http://www.php.cn/" replace></router-link>

(3) valeur de l'attribut "tag"

Le lien de routeur avec l'attribut tag sera rendu dans la balise correspondante

<router-link :to="/http://www.php.cn/" tag="li">PHP中文网</router-link>

ce qui équivaut à

<li>PHP中文网</li>

Le li dans la page à ce moment jouera également le rôle d'une balise, car vue lui liera automatiquement un événement de clic et passera à la page

(4) Valeur de l'attribut "active-class"

Cet attribut est utilisé pour définir l'attribut de classe lors de l'activation du lien, c'est-à-dire la page actuelle et tous les liens correspondant à l'actuel. l'adresse de la page sera ajoutée avec l'attribut class

<router-link :to="http://www.php.cn/" active-class="u-link--Active">PHP中文网</router-link>

La valeur par défaut de l'attribut active-class est router-link-active, donc s'il n'est pas défini, il sera rendu comme cette classe

(5) valeur de l'attribut "append"

Après avoir défini l'attribut append, ajoutez le chemin de base avant le chemin (relatif) actuel. Par exemple, nous naviguons de /a vers un chemin relatif b. Si append n'est pas configuré, le chemin est /b Si append est configuré, c'est /a/b

<router-link :to="{ path: &#39;relative/path&#39;}" append></router-link>

Utiliser le lien de routeur. au lieu de la balise a. L'avantage de l'attribut

router-link peut être rendu comme n'importe quel élément de la page. Par exemple, le rendu dans la balise li dans le code ci-dessus permet toujours d'obtenir l'effet de saut. De plus, lorsque nous cliquons sur la balise a, la page peut être rechargée, mais après avoir utilisé le lien du routeur, cette balise sera surveillée par vue et la page ne sera pas actualisée lorsque le lien sera sauté.

Résumé : ce qui précède représente l'intégralité du contenu de cet article, j'espère qu'il sera utile à tout le monde.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!