【vue-router】router-link でクリックイベントが反応しない【 v-on:click / @click】

【vue-router】router-link でクリックイベントが反応しない【 v-on:click / @click】

タイトル通りで、vue-routerを使っている場合に、router-linkにクリックイベント(v-on:click / @click)を定義しても、反応しません。
そんな時にどうしたら良いか、2つの方法でご紹介します。

ネイティブのクリックイベントを使う

ここでの問題は、router-linkではVueイベントのv-on:click / @clickをサポートしていないということです。
なので、ネイティブのクリックイベントを呼び出します。
その方法は、後ろに「native」をつけるだけです。

<router-link v-on:click.native="doSomething()" to="/path">Something</router-link>

これでできるはずです。
この方法が気にくわない場合には、もう一つ方法があります。

router-linkの中にもう要素を追加して、そこにクリックイベントを定義する

こちらはVueイベントを使うことができます。
方法は簡単で、router-link内にspanタグなどを用意して、そこにクリックイベントを設定するものになります。

<router-linkto="/path">
    <span  v-on:click.native="doSomething()">Something</span>
</router-link>

どちらの実装も簡単ですね。
以上です。