【Vue】router-linkのv-on:clickを有効にする方法【vue-router】
vue-routerを使用している場合、router-linkを使う場面も多いかと思います。
その中でクリックした場合の挙動などを設定するために、
v-on:click
もしくは
@click
を使いたいたかったので、その方法を調べました。
router-linkではv-onをサポートしていない。
router-linkでのクリックイベントなどを定義する際には、普通に
<router-link @click="clickEvent()">遷移します</router-link>
のように、v-on:clickを設定しても動きません。
なぜなら、router-linkではv-onをサポートしていないからです。
native修飾子を使って、ネイティブイベントを呼び出す
こちらに記載がありました。
jp.vuejs.org
.native修飾子を使うことによって、Vueイベントではなく、ネイティブイベントを呼び出すことが可能です。
それよって、router-linkにもクリックイベントを設定することができます。
<router-link @click.native="clickEvent()">遷移します</router-link>
使えないのでもしかすると思って調べて見ましたが、router-linkで@click（クリックイベント）を使えないのは知らなかったです。
