Enfermer une étiquette de lien de routeur dans un bouton dans vuejs
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.
Vous pouvez utiliser tag prop .
<router-link to="/foo" tag="button">foo</router-link>
La réponse de @choasia est correcte.
Alternativement, vous pouvez envelopper une balise button dans une balise router-link comme ceci:
<router-link :to="{name: 'myRoute'}">
<button id="myButton" class="foo bar">Go!</button>
</router-link>
Ce n'est pas si propre parce que votre bouton sera dans un élément de lien (<a>). Cependant, l'avantage est que vous avez un contrôle total sur votre bouton, ce qui peut être nécessaire si vous travaillez avec une infrastructure frontale telle que Bootstrap.
Pour être honnête, je n'ai jamais utilisé cette technique sur des boutons. Mais je l'ai souvent fait sur des divs ...
Bien que toutes les réponses soient bonnes, aucune ne semble être la solution la plus simple. Après quelques recherches rapides, il semble que le moyen le plus simple de créer une vue avec un bouton consiste à appeler router.Push. Ceci peut être utilisé dans un modèle .vue comme ceci:
<button @click="$router.Push('about')">Click to Navigate</button>
Super simple et propre. J'espère que quelqu'un d'autre trouvera cela utile!
Source: https://router.vuejs.org/guide/essentials/navigation.html
Maintenant, jours (VueJS> = 2.x) vous feriez:
<router-link tag="button" class="myClass" id="button" :to="place.to.go">Go!</router-link>
Je travaille sur Vue CLI 2 et celui-ci a fonctionné pour moi!
<router-link to="/about-creator">
<button>About Creator</button>
</router-link>