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

82

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

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

Kushagra Agarwal
fuente
Para obtener respuestas en 2019 y Vue Router 3.1.0+, desplácese hacia abajo para obtener respuestas actualizadas stackoverflow.com/a/58495529/90674
sshow

Respuestas:

139

Puedes usar tagprop .

<router-link to="/foo" tag="button">foo</router-link>
choasia
fuente
6
¿Qué pasa si ese botón acepta algunos accesorios? ¿Cómo repartirlos?
andcl
1
@andcl Tenía la misma pregunta, publiqué la respuesta a continuación, que me dijo el equipo de Vue-Router en GitHub aquí: github.com/vuejs/vue-router/issues/3003
Jeff Hykin
1
¡Traté de votar esto casi un año después de que ya lo hice! akkk gracias de nuevo
Akin Hwan
63

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

Wes Winder
fuente
4
¡Si, gracias! Este fue el más simple y funcionó perfectamente. Y podía diseñar mi botón como quisiera. Si necesita usar params, también puede hacer algo como esto: <button @click = "$ router.push ({name: 'about', params: {id: $ route.params.id},})"> Haga clic para navegar </button>
Joe Who
44

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

Badacadabra
fuente
1
Además, se puede especificar tag = "span" dentro de <router-link> para que no aplique <a> estilos, lo que brinda un control aún mejor sobre el aspecto: <router-link to = "/ foo" tag = "span"> <Button> Texto del botón </Button> </router-link>
vir us
Pero las palabras en el botón (por ejemplo, "¡Ve!" En tu ejemplo) tendrán el subrayado azul, lo cual no es hermoso ...
Journey Woo
Incluso con marcos como Bootstrap, esto casi nunca es necesario, porque puede incluir atributos estándar como class directamente en la etiqueta de enlace del router, y estos se aplicarán al elemento renderizado, incluso a un botón, cuando use tag = "button" : <router-link tag = "button" class = "btn btn-primary" to = "..."> </router-link>
Ciabaros
11

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

Joe que
fuente
9

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

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

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>
Jeff Hykin
fuente
1
Si no está en la versión> = 3.1.0, el elemento en la ranura se ignorará silenciosamente sin que se muestre ningún error. Enlace a documentos: router.vuejs.org/api/#v-slot-api-3-1-0
sshow
No puedo descargar 3.1.0, dice que la última es 3.0.0 rc
The Fool
No es Vue 3.1.0, es vue-router 3.1.0.
Anuga
Gracias @Anuga, lo arregló 👍 Y gracias @ sshow, la documentación está vinculada ahora.
Jeff Hykin
3

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>

  1. 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');
        }
    }
}
Kaushik shrimali
fuente
0

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

<router-link to="/about-creator">
<button>About Creator</button>
</router-link>
Aasshey Triveddi
fuente
0
    // 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' } })
Muhammad Waqas
fuente
-1

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.

Pedro Henrique
fuente