nuxt-linkをクリックした時に、SPとPCで挙動を分けたいというときや、クリックしたりホバーしたりなにかしたいと思ったときに、そのままでは動かなかったのでメモ。

ネイティブイベントを呼び出す(.nativeをつける)

結論からいうとこれです。
そのままではv-on:clickが効かないため.nativeをつけます。

nuxt-linkの拡張元のrouter-linkではv-on:clickをサポートしていないため、ネイティブイベントを呼び出す必要があるみたいです。

[Vue.js/Nuxt.js] <nuxt-link>に@clickを付ける場合は@click.nativeの記述にしなければ動かない

<nuxt-link
  @click.native="methods"
  to="#!"
>
  リンク
</nuxt-link>

これでクリックイベントが使えるようになります。
マウスオーバーイベントも同様にnativeをつけることで動作します。

<nuxt-link
  @mouseover.native="methods"
  @mouseleave.native="methods"
  to="#!"
>
  リンク
</nuxt-link>

preventDefaultしたい

PCのときは普通にリンクさせるけど、SPのときはリンクを無効にしたいというとき。
Event.preventDefault()したいんですよ。

そんなときに使うのはeventプロパティ。

<nuxt-link
  @click.native="methods"
  event=""
  to="#!"
>
  リンク
</nuxt-link>

nuxt-link(router-link)はデフォルトでeventプロパティにクリックが指定されているのでこのプロパティを空にすることで無効化できるみたいです。

はVueRouterのコンポーネントの糖衣構文なわけだが、
このコンポーネントにはeventという、Routerが何のイベントをトリガーとして処理を行うかを設定するプロパティがある。

< nuxt-link > をpreventしたい

.prevent修飾子は使えないの？

router-linkの持ち物でprevent修飾子というものがあって、これでもやってみたのですがうまく動きませんでした。
これはaタグにしか使えないみたいです。

<!-- 動かないパターン -->
<nuxt-link
  @click.native.prevent="hoge"
  to="#!"
>
  リンク
</nuxt-link>

<script>
...
  methods: {
    hoge(e) {
      e.preventDefault();
    }
  }
...
</script>

<!-- 動くパターン -->
<a href="#!" @click.prevent="hoge">
  リンク
</a>

<script>
...
  methods: {
    hoge(e) {
      e.preventDefault();
    }
  }
...
</script>

router-linkの仕様みたいなので、nuxtに限らずVueでも同じことが言えますね。

その他参考にしたサイト

今回もありがとうございます。

【vue.js】router-linkに＠mouseoverや＠mouseleaveが効かない時の対処法