The sky is the limit

Vue.js、PHP、Java、Cordova、Monacaを中心にハイブリッドアプリ開発、PWA開発など効率的なWEB、iOS、Androidアプリ開発の情報を共有します。

【Vue】router-linkのv-on:clickを有効にする方法【vue-router】

【Vue】router-linkのv-on:clickを有効にする方法【vue-router】

f:id:duo-taro100:20160218004611p:plain

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(クリックイベント)を使えないのは知らなかったです。