Incluir una etiqueta de enlace de enrutador en un botón en vuejs

¿Puedo envolver o incluir una router-linketiqueta en una buttonetiqueta?

Cuando presiono el botón, quiero que me dirija a la página deseada.

Puedes usar tagprop .

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

Si bien las respuestas aquí son todas buenas, ninguna parece ser la solución más simple. Después de una investigación rápida, parece que la forma más fácil de hacer que un botón use vue-router es con la router.pushllamada. Esto se puede usar dentro de una plantilla .vue como esta:

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

Súper simple y limpio. ¡Espero que alguien más encuentre esto útil!

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

La respuesta de @choasia es correcta.

Alternativamente, puede envolver una buttonetiqueta en una router-linketiqueta como esta:

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

Esto no es tan limpio porque su botón estará dentro de un elemento de enlace ( <a>). Sin embargo, la ventaja es que tiene un control total sobre su botón, lo que puede ser necesario si trabaja con un marco de interfaz de usuario como Bootstrap.

Nunca he usado esta técnica en botones, para ser honesto. Pero hice esto en divs con bastante frecuencia ...

Gracias a la respuesta de Wes Winder y extendiéndola para incluir parámetros de ruta:

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

Y reiterando la fuente que proporcionó Wes: https://router.vuejs.org/guide/essentials/navigation.html

Ahora días (VueJS> = 2.x) harías:

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

A partir de Vue-Router 3.1.0, la forma ideal es usar la API de ranuras.
Documentación aquí

La respuesta de @ choasia no permite que se pasen los accesorios al componente
La respuesta de @ Badacadabra causa problemas con los botones de la biblioteca (como los márgenes de los botones)

Así es como funcionaría la solución con la API de ranuras

<router-link
  to="/about"
  v-slot="{href, route, navigate}"
  >
    <button :href="href" @click="navigate" class='whatever-you-want'>
      {{ route.name }}
    </button>
</router-link>

Métodos de enrutamiento que utilizan el método y también el enrutamiento 1. Enlace de enrutador

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

2. Cuando haga clic en el botón de ese tipo, llame a otra ruta.

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

¡Estoy trabajando en Vue CLI 2 y este me ha funcionado!

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

    // literal string path
router.push('home')

// object
router.push({ path: 'home' })

// named route
router.push({ name: 'user', params: { userId: '123' } })

// with query, resulting in /register?plan=private
router.push({ path: 'register', query: { plan: 'private' } })

Un ejemplo usando bootstrap-vue y creando un enlace con la identificación dentro de una fila de la tabla:

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

Donde fieldsy itemsson los nombres de las columnas y el contenido de la tabla, respectivamente.