👻
Vue / Nuxt Router Linkの遷移をイベントでブロックする方法
始めに
Nuxt Linkで特定条件下では遷移しないようにイベント自体をブロックしたかったのですが、それが思いの外上手くいかず苦戦したので備忘録として残します。サンプルではvue-routerで話していますが、nuxtでも同じように対応することができます。
TL;DR
結論を言うと、router-linkなどリンク系の配下にタグを差し込んでそこでブロックします。リンク自体のイベントを拾っても止めることはできません。
<!-- NG -->
<router-link to="/" @click.native.prevent>トップページ</router-link>
<!-- OK -->
<router-link to="/">
<span @click.prevent>トップページ</span>
</router-link>
理由
よくNuxtなどでnativeをつけないとイベントが拾えないと書いてあるため、nativeさえ書けばイベントを止められると僕も思っていたのですが、どうやらネイティブの挙動だけ止められるようです。最後にサンプルを用意したのでそこで試してみて欲しいですが、Commandキーを押した時に別タブで遷移するような動作はブロックできています。nativeと書いてあるだけあって、ネイティブ本来の挙動に対してはブロックできますが、ライブラリ側で実装しているルーティング自体の処理はブロックできないようです。
対策
router-link自体にブロックできないのであればお手上げかと思いましたが、そもそもイベントがそこまで届かなければ結果的に止めることができます。なので子要素でイベントを止めてしまうことでルーティングをブロックすることができます。ここで特定の条件だけイベントをブロックするということも可能になります。
終わりに
以上がrouter-linkでイベントをブロックさせる方法でした。中途半端にイベントが拾えていたためなかなかルーティング自体をブロックすることができず苦労したので、参考になれば幸いです。
最後にサンプルを用意してますので、気になる方は触ってみてください😄
Discussion