Einschließen eines Router-Link-Tags in eine Schaltfläche in vuejs

79

Kann ich ein router-linkTag in ein buttonTag einschließen oder einschließen ?

Wenn ich die Taste drücke, soll sie mich zur gewünschten Seite weiterleiten.

Kushagra Agarwal
quelle
Für Antworten in 2019 und Vue Router 3.1.0+ scrollen Sie nach unten, um aktuelle Antworten zu erhalten. Stackoverflow.com/a/58495529/90674
sshow

Antworten:

134

Sie können tagStütze verwenden .

<router-link to="/foo" tag="button">foo</router-link>
Choasia
quelle
6
Was ist, wenn dieser Knopf einige Requisiten akzeptiert? Wie kann man sie verteilen?
andcl
1
@undcl Ich hatte die gleiche Frage, ich habe die Antwort unten gepostet, die mir vom Vue-Router-Team auf GitHub hier
mitgeteilt wurde
1
Ich habe versucht, dies fast ein Jahr nachdem ich es bereits getan habe, zu verbessern! Nochmals vielen Dank
Akin Hwan
scheint in Vue 3 nicht mehr zu funktionieren.
Adam Jagosz
58

Obwohl die Antworten hier alle gut sind, scheint keine die einfachste Lösung zu sein. Nach einigen kurzen Recherchen scheint es, dass der router.pushAnruf der einfachste Weg ist, einen Knopf zum Verwenden des Vue-Routers zu verwenden . Dies kann in einer .vue-Vorlage wie folgt verwendet werden:

<button @click="$router.push('about')">Click to Navigate</button>

Super einfach und sauber. Ich hoffe, jemand anderes findet das nützlich!

Quelle: https://router.vuejs.org/guide/essentials/navigation.html

Wes Winder
quelle
3
Ja Dankeschön! Dies war die einfachste und funktionierte perfekt. Und ich könnte meinen Knopf stylen, wie ich wollte. Wenn Sie Parameter verwenden müssen, können Sie auch Folgendes tun: <button @click = "$ router.push ({name: 'about', params: {id: $ route.params.id},})"> Klicken Sie, um zu navigieren </ button>
Joe Who
46

Die Antwort von @choasia ist richtig.

Alternativ können Sie buttonein router-linkTag wie folgt in ein Tag einschließen:

<router-link :to="{name: 'myRoute'}">
  <button id="myButton" class="foo bar">Go!</button>
</router-link>

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 ...

Badacadabra
quelle
1
Zusätzlich kann man tag <"span" in <router-link> angeben, damit keine <a> -Stile angewendet werden, was eine noch bessere Kontrolle über das Aussehen bietet: <router-link to = "/ foo" tag = "span"> <Button> Button Text </ Button> </ router-link>
vir us
Aber die Wörter in der Schaltfläche (zB "Go!" In Ihrem Beispiel) haben die blaue Unterstreichung, die nicht schön ist ...
Journey Woo
Selbst bei Frameworks wie Bootstrap ist dies kaum erforderlich, da Sie Standardattribute wie class direkt in das Router-Link-Tag aufnehmen können. Diese werden auf das gerenderte Element angewendet, sogar auf eine Schaltfläche, wenn Sie tag = "button" verwenden. : <router-link tag = "button" class = "btn btn-primary" to = "..."> </ router-link>
Ciabaros
9

Jetzt Tage (VueJS> = 2.x) würden Sie tun:

<router-link tag="button" class="myClass" id="button" :to="place.to.go">Go!</router-link>
Anuga
quelle
9

Dank der Antwort von Wes Winder und ihrer Erweiterung um Routenparameter:

<button @click="$router.push({name: 'about-something', params: { id: 'abc123' },})">Click to Navigate</button>

Und wiederholen Sie die Quelle, die Wes zur Verfügung gestellt hat: https://router.vuejs.org/guide/essentials/navigation.html

Joe Who
quelle
7

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>
Jeff Hykin
quelle
1
Wenn Sie nicht mit Version> = 3.1.0 arbeiten, wird das Element im Steckplatz stillschweigend ignoriert, ohne dass Fehler angezeigt werden. Link zu den Dokumenten: router.vuejs.org/api/#v-slot-api-3-1-0
sshow
Ich kann 3.1.0 nicht herunterladen. Es heißt, die neueste Version ist 3.0.0 rc
The Fool
Es ist nicht Vue 3.1.0, es ist Vue-Router 3.1.0.
Anuga
Danke @Anuga, behoben 👍 Und danke @ sshow, die Dokumentation ist jetzt verlinkt.
Jeff Hykin
3

Routing-Methoden mit Methode sowie Routing 1. Router-Verbindung

<router-link to="/login">Login </router-link>

  1. Wenn Sie auf diese Schaltfläche klicken, rufen Sie eine andere Route auf.
<template>
    <input type="submit" value="Login" @click="onLogIn" class="btn float-right btn-primary">
    </template>
<script>
export default {
    name:'auth',
    data() {
        return {}
    },
    methods: {
        onLogIn() {
            this.$router.replace('/dashboard');
        }
    }
}
Kaushik Shrimali
quelle
0

Ich arbeite an Vue CLI 2 und dieser hat für mich funktioniert!

<router-link to="/about-creator">
<button>About Creator</button>
</router-link>
Aashay Trivedi
quelle
-1

Ein Beispiel für die Verwendung von bootstrap-vue und das Erstellen einer Verknüpfung mit der ID in einer Tabellenzeile:

<b-table :fields="fields" :items="items">
    <template v-slot:cell(action)="data">
        <router-link :to="`/rounds/${data.item.id}`" v-slot="{ href, route, navigate}">
            <b-button :href="href" @click="navigate" color="primary" style="text">{{ data.item.id }}</b-button>
        </router-link>
    </template>
</b-table>

Wo fieldsund itemssind die Spaltennamen bzw. der Tabelleninhalt.

Pedro Henrique
quelle