nuxt-linkのクリックイベントで

• PC表示なら普通にページ遷移する
• SP表示ならページ遷移しないで何らかの処理を行う

…をやりたいと思いました。

しかも幅のサイズによってCSSでデザインを使い分けているため、できれば1つの nuxt-link でPCとSPで違う処理ができるようにしたかったのです。

問題点

nuxt-link で event.preventDefault() が使えない。

愕然としましたね。

解決策

 <template>
     <nut-link
       to=“/hoge”
       @click.native.prevent="trigger"
       event=""
       >リンク</nuxt-link
     >
 </template>
 
 <script>
 export default {
   name: ‘Hoge’,
   methods: {
     trigger(event) {
       if (window.matchMedia('(max-width: 599px)').matches) {
         // 何らかの処理
       } else {
         // 遷移
         this.$router.push({ path: event.target.pathname })
       }
     }
   }
 }
 </script> 

解説

nuxt-linkに event=“” を入れることでリンクを無効にすることができます。
そしてメソッドに trigger をつくり、スマホかPCかジャッジしてそれぞれの処理をするようにしています。

@click=”trigger” と入れるだけではクリックしてもメソッドが呼ばれません。
@click.native と “.native” をつけることでクリックした時にメソッドが呼ばれるようになります。

あとがき

数時間調べて答えが見つからず、諦めて力技で解決しました。
もっとクールな方法があれば教えてください…