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

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.

Sie können tagStütze verwenden .

<router-link to="/foo" tag="button">foo</router-link>

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

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

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

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

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

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>

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

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

2. 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');
        }
    }
}

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

<router-link to="/about-creator">
<button>About Creator</button>
</router-link>

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.