button - link - Adjuntar una etiqueta de enlace de enrutador en un botón en vuejs

vue router reference

Question

¿Puedo envolver o encerrar una etiqueta de router-link en una etiqueta de button ?

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

Answer 1

¡Estoy trabajando en Vue CLI 2 y este ha funcionado para mí!

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

Answer 2

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

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

Answer 3

La respuesta de @choasia es correcta.

Alternativamente, podría envolver una etiqueta de button en una etiqueta de router-link manera:

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

Esto no está 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 frontal como Bootstrap.

Nunca he usado esta técnica en los botones, para ser honesto. Pero lo hice en divs bastante a menudo ...

Answer 4

Puede utilizar la tag prop .

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

Answer 5

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 llamada router.push . Esto se puede utilizar dentro de una plantilla .vue como esta:

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

Super simple y limpio. Espero que alguien más encuentre esto útil!

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