¿Puedo envolver o incluir una router-link
etiqueta en una button
etiqueta?
Cuando presiono el botón, quiero que me dirija a la página deseada.
¿Puedo envolver o incluir una router-link
etiqueta en una button
etiqueta?
Cuando presiono el botón, quiero que me dirija a la página deseada.
Respuestas:
Puedes usar tag
prop .
<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.push
llamada. 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 button
etiqueta en una router-link
etiqueta 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
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>
<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 fields
y items
son los nombres de las columnas y el contenido de la tabla, respectivamente.