Detaillierte Erläuterung des Router-Link-Attributs in Vue

Das Router-Link-Attribut in Vue hat die folgenden Attributwerte: to entspricht dem herf-Tag zum Hinzufügen von Sprunginhalten, replace wird verwendet, um beim Seitenwechsel keinen Verlaufseintrag zu hinterlassen, und das Tag rendert den Router-Link in entsprechendes Tag. Warten

In vue können vue.js und vue-router kombiniert werden, um eine einfache Einzelseitenanwendung zu implementieren, in der eine Komponente ist, die hauptsächlich zum Festlegen von Navigationslinks verwendet wird Erzielen Sie unterschiedliche HTML-Inhaltsumschaltungen. Als nächstes werde ich dieses Attribut im Artikel ausführlich vorstellen, der einen gewissen Referenzwert hat und ich hoffe, dass es für alle hilfreich ist.

[Empfohlene Kurse: Vue Tutorial]

Router-Link-Tag

In der vue1.0-Version wird das a-Tag weiterhin zur Implementierung der Link-Jump-Funktion verwendet, die Link-Adresse unterscheidet sich jedoch von der in HTML Verwendet V-Link-Eigenschaften zur Steuerung. In Version 2.0 wurde das a-Tag jedoch durch das rount-link-Attribut ersetzt, es wird jedoch weiterhin im a-Tag gerendert, wenn es auf der Seite angezeigt wird. Als nächstes wird die Verwendung jedes Werts in diesem Attribut im Detail vorgestellt

Detaillierte Erläuterung des Router-Link-Attributwerts

(1) „:to“-Attributwert

Dieser Attributwert entspricht dem „herf“-Attribut im a-Tag, und der folgende Inhalt ist der Inhalt des Sprunglinks.

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

entspricht

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

(2) Attributwert „ersetzen“

Der Hauptzweck des Hinzufügens des Attributwerts „ersetzen“ im Routre-Link-Tag besteht nicht darin, beim Seitenwechsel einen Verlaufseintrag zu hinterlassen

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

(3) Attributwert „Tag“

Der Router-Link mit Tag-Attribut wird in das entsprechende Tag

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

gerendert, das äquivalent zu

ist

<li>PHP中文网</li>

li in der Seite zu diesem Zeitpunkt Es wird auch die Rolle eines Tags spielen, da Vue automatisch ein Klickereignis daran bindet und zur Seite

(4) „aktiv“ springt -class“-Attributwert

Dieses Attribut wird verwendet, um das Klassenattribut beim Aktivieren des Links festzulegen. Das heißt, die aktuelle Seite und alle Links, die mit der aktuellen Seitenadresse übereinstimmen, werden mit dem Klassenattribut < hinzugefügt 🎜>

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

Der Standardwert des Active-Class-Attributs ist router -link-active. Wenn es also nicht festgelegt ist, wird es als diese Klasse

(5) „append“ gerendert " Attributwert

Nach dem Festlegen des Append-Attributs wird dann der Basispfad vor dem aktuellen (relativen) Pfad angehängt. Zum Beispiel navigieren wir von /a zu einem relativen Pfad b. Wenn append nicht konfiguriert ist, ist es /a/b

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

Die Vorteile der Verwendung von Router-. link anstelle des a-Tags

Das router-link-Attribut kann als beliebiges Element auf der Seite gerendert werden. Beispielsweise erzielt das im obigen Code gerenderte li-Tag immer noch den Sprungeffekt. Wenn wir außerdem auf ein Tag klicken, wird die Seite möglicherweise neu geladen. Nach der Verwendung von Router-Link wird dieses Tag jedoch von Vue überwacht und die Seite wird nicht aktualisiert, wenn der Link übersprungen wird.

Zusammenfassung: Das Obige ist der gesamte Inhalt dieses Artikels, ich hoffe, er wird für alle hilfreich sein.

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung des Router-Link-Attributs in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!