web-dev-qa-db-ja.com

vuejsのボタンでルーターリンクタグを囲む

router-linkタグをbuttonタグでラップまたは囲むことはできますか？

ボタンを押すと、目的のページにルーティングされます。

buttonvue.jsvue-router
43
Kushagra Agarwal

tag prop を使用できます。

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

@ choasiaの答えは正しいです。

または、次のようにbuttonタグをrouter-linkタグでラップすることもできます。

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

ボタンはリンク要素（<a>）内にあるため、これはそれほどきれいではありません。ただし、利点は、ボタンを完全に制御できることです。これは、Bootstrapなどのフロントエンドフレームワークを使用する場合に必要になる場合があります。

正直なところ、ボタンにこの手法を使用したことはありません。しかし、私はこれをdivでかなり頻繁に行いました...

36
Badacadabra

ここでの答えはすべて良いですが、最も単純な解決策はないようです。いくつかの簡単な調査の後、vue-routerを使用するボタンを作成する最も簡単な方法は、router.Push呼び出しを使用することです。これは、次のように.vueテンプレート内で使用できます。

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

超シンプルできれい。他の誰かがこれを役に立つと思うことを願っています！

ソース： https://router.vuejs.org/guide/essentials/navigation.html

25
Wes Winder

数日（VueJS> = 2.x）になります：

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

Wes Winderの回答に感謝し、ルートパラメーターを含めるように拡張しました。

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

Weが提供したソースを繰り返します： https://router.vuejs.org/guide/essentials/navigation.html

1
Joe Who

私はVue CLI 2に取り組んでいますが、これは私のために働いています！

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