便利だけど難しい <nuxt-link>
リンクタグを自動生成してくれるわ、VueRouterの操作もよしなにやってくれるわ、とめちゃくちゃ便利な <nuxt-link> 。
ただちょっと細かいことをやろうとすると、少しひねくれた手段が必要になる。
例えばクリックしたとき画面遷移と同時に何かしらイベントを起こしたい場合、
そのまま普通にイベントリスナをバインドするだけではダメで、.native修飾子をつけなくてはいけない。
<!-- ダメ -->
<nuxt-link to="/hogehoge" @click="fuga"> hogefuga </nuxt-link>
<!-- 良い -->
<nuxt-link to="/hogehoge" @click.native="fuga"> hogefuga </nuxt-link>
これは<nuxt-link>がルートに<a>要素が配置されたコンポーネントとして扱われるため。
<a>タグは prevent で遷移を握りつぶせるけど...
で、今回の本題はクリックした時に処理を走らせて、本来のルーター処理を握りつぶすにはどうしたらいいか。
例えばログイン状態でないと遷移しないリンクとかを作りたい時には、標準の画面遷移処理はなかったことにしないといけない。
こういう時<a>タグで実装する場合は、.prevent修飾子を使ったり、EventインスタンスのpreventDefaultを使うと標準処理を握りつぶせる。
<!-- HTMLでprevent指定を行う -->
<a href="/hogehoge" @click.prevent="fuga"> hogefuga </a>
<script>
...
methods: {
fuga(e) {
// jsでpreventする
e.preventDefault();
}
}
...
</script>
ところが<nuxt-link>では上記の方法でイベントを握りつぶすことができない。
VueRouterが入っているのが原因なのだとは思うが、何とかできないだろうか？
Routerイベントのトリガーを書き換える
<nuxt-link>はVueRouterのコンポーネント<router-link>の糖衣構文なわけだが、
このコンポーネントにはeventという、Routerが何のイベントをトリガーとして処理を行うかを設定するプロパティがある。
というわけで、このトリガーに対して全く無効なイベントタイプを指定してやれば、クリックしても動かなくなるという寸法。
<!-- eventトリガに何も指定しないので、/hogehogeに遷移するRouterイベントが発生しない -->
<nuxt-link to="/hogehoge" @click.native="fuga" event=""> hogefuga </nuxt-link>
このeventプロパティを動的に指定してやることで、条件に応じたnuxt-linkの操作を行うこともできるので、
例えばログイン時には"click"、未ログイン時には""を与えるようバインドする、といった条件わけも可能である。