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


Respuestas:


139

Puedes usar tagprop .

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

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


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


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


9

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

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

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>

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

0

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

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

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

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

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.