Enfermer une étiquette de lien de routeur dans un bouton dans vuejs

Question

Puis-je envelopper ou inclure une balise router-link dans une balise button ?

Quand je presse le bouton, je veux qu’il me mette à la page désirée.

Answer 1

Vous pouvez utiliser tag prop .

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

Answer 2

Même si les réponses ici sont tous bons, aucun ne semble être la solution la plus simple. Après quelques recherches rapides, il semble que la véritable façon la plus simple de faire un bouton vue-routeur est avec l' router.push appel. Ceci peut être utilisé à l'intérieur d'un .vue modèle comme celui-ci:

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

Super simple et propre. J'espère que quelqu'un trouve cette pratique!

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

Answer 3

@choasia's réponse est correcte.

Sinon, vous pouvez envelopper un button balise dans un router-link balise comme ceci:

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

Ce n'est pas très propre parce que votre bouton sera à l'intérieur d'un élément de lien (<a>). Cependant, l'avantage est que vous avez un contrôle total sur votre bouton, qui peut être nécessaire si vous travaillez avec un front-end framework comme Bootstrap.

Je n'ai jamais utilisé cette technique sur les boutons, pour être honnête. Mais je l'ai fait sur les divs assez souvent...

Answer 4

Merci à la réponse de Wes Winder et à son extension pour inclure les paramètres de route:

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

Et réitérant la source fournie par Wes: https://router.vuejs.org/guide/essentials/navigation.html

Answer 5

Maintenant, jours (VueJS> = 2.x) vous feriez:

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