NuxtLinkの落とし穴まとめ 〜自分がハマった5つのポイント〜
こんにちは．今回はNuxt.js（特にNuxt 2/3）の開発でよく使う <NuxtLink> について，自分が実際にハマった落とし穴をまとめてみました．
NuxtLinkは非常に便利ですが，意外と罠も多いです．この記事が，これからNuxtを触る方の助けになれば幸いです．
NuxtLinkってなに？
<NuxtLink> は，Nuxt.jsが提供する内部リンク用コンポーネントです．
Vue Routerの <router-link> をベースにしていて，SPAとして高速な遷移ができます．
基本的な使い方はこんな感じ：
<NuxtLink to="/about">Aboutページへ</NuxtLink>
ハマった落とし穴5選
外部リンクに使うと壊れる
外部サイト
これは動きません．
使うならタグを使いましょう．
:to="..." のバインディングを忘れる
ユーザー
正しくは
ユーザー
バインディングを忘れると，意図しないパスに遷移します．これにはびっくり．
prefetchによる過剰なリクエスト
NuxtLinkはデフォルトで先読み（prefetch）を行いますが，APIベースの動的ページではAPIが無駄に呼ばれてしまうことがあります．
遷移する
パフォーマンスが悪いと思った時は重要な気がします．
active-classが効かない
CSSで .nuxt-link-active を指定しても効かない…ということありませんか？
- デフォルトの active-class は nuxt-link-active
- 完全一致が必要なときは exact-active-class を使う
- Nuxt 3では RouterLink の仕様に準拠
ホーム
Nuxt2とNuxt3の違いに困る．
Nuxt 3では NuxtLink は RouterLink をラップしたコンポーネントで，Vue Router 4 に対応しています．そのため，型や属性の挙動が微妙に違います．
- custom属性の扱い
- v-slot="{href,navigate}"などの使い方
- type="button"などが不要
まとめ
NuxtLinkは便利ですが，正しく理解して使わないと意外とハマります．
初学者の方や，自分と同じように困った人の参考になればうれしいです！
ご指摘・ご質問などあればコメントください！