Kann ich ein router-link
Tag in ein button
Tag einschließen oder einschließen ?
Wenn ich die Taste drücke, soll sie mich zur gewünschten Seite weiterleiten.
button
vue.js
vue-router
Kushagra Agarwal
quelle
quelle
Antworten:
Sie können
tag
Stütze verwenden .quelle
Obwohl die Antworten hier alle gut sind, scheint keine die einfachste Lösung zu sein. Nach einigen kurzen Recherchen scheint es, dass der
router.push
Anruf der einfachste Weg ist, einen Knopf zum Verwenden des Vue-Routers zu verwenden . Dies kann in einer .vue-Vorlage wie folgt verwendet werden:Super einfach und sauber. Ich hoffe, jemand anderes findet das nützlich!
Quelle: https://router.vuejs.org/guide/essentials/navigation.html
quelle
Die Antwort von @choasia ist richtig.
Alternativ können Sie
button
einrouter-link
Tag wie folgt in ein Tag einschließen:Dies ist nicht so sauber, da sich Ihre Schaltfläche in einem Linkelement befindet (
<a>
). Der Vorteil ist jedoch, dass Sie die volle Kontrolle über Ihre Schaltfläche haben. Dies kann erforderlich sein, wenn Sie mit einem Front-End-Framework wie Bootstrap arbeiten.Ich habe diese Technik noch nie bei Knöpfen angewendet, um ehrlich zu sein. Aber ich habe das ziemlich oft bei Divs gemacht ...
quelle
Jetzt Tage (VueJS> = 2.x) würden Sie tun:
quelle
Dank der Antwort von Wes Winder und ihrer Erweiterung um Routenparameter:
Und wiederholen Sie die Quelle, die Wes zur Verfügung gestellt hat: https://router.vuejs.org/guide/essentials/navigation.html
quelle
Ab Vue-Router 3.1.0 ist die Verwendung der Slots-API der ideale Weg.
Dokumentation hier
Die Antwort von @ choasia erlaubt nicht, dass Requisiten an die Komponente
übergeben werden. Die Antwort von @ Badacadabra verursacht Probleme mit Bibliotheksschaltflächen (wie z. B. Schaltflächenrändern).
So würde die Lösung mit der Slots-API funktionieren
<router-link to="/about" v-slot="{ href, route, navigate}" > <button :href="href" @click="navigate" class='whatever-you-want'> {{ route.name }} </button> </router-link>
quelle
quelle
Ich arbeite an Vue CLI 2 und dieser hat für mich funktioniert!
quelle
Ein Beispiel für die Verwendung von bootstrap-vue und das Erstellen einer Verknüpfung mit der ID in einer Tabellenzeile:
Wo
fields
unditems
sind die Spaltennamen bzw. der Tabelleninhalt.quelle