【Nuxt.js】aタグと NuxtLink の違いとは??

こんにちは!CODE CLUB965のKです!

最近案件でNuxt.jsを使っており気になったので記事にしました。

<a>と<NuxtLink>の違いってすぐに分かりますか?

慣れていない方はすぐには答えられないと思いますが、この記事をみて頭の片隅に置いておけばいいと思います。

aタグについて

念の為、aタグが分からないという方に向けて書いておくと、aタグはHTMLで使えるタグでリンクに飛ぶときに使います。(anchorの「a」とのことです。)

例えば、

<a href="https://sample.com">サンプルページ</a>

のように使います。

これによって指定されたURLに飛ぶことができます。

NuxtLink とは

aタグと同じくリンクに飛ぶことができます。

Vuejsのrouter-linkを拡張しているものですね。

使い方は、

<NuxtLink to="/sample">サンプルページ</NuxtLink>

のように使います。

aタグとの違いは?

簡単に言うと、<a>は外部ページ、<NuxtLink>は内部ページに対して使います。

使いわ変える必要があるのか?と思う方もいると思いますが、Nuxt.jsの公式ドキュメントにもサイト内のページへ全てのリンクに対して <NuxtLink> を使用する必要がありますと記載あるので従いましょう…。

公式のドキュメントは以下から確認できるので時間がある方は一度読むといいと思います。

https://nuxtjs.org/ja/docs/features/nuxt-components/#nuxtlink-%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88

最後に

今回は、aタグとNuxtLinkの違いについて書きました。

<a>は外部ページ、<NuxtLink>は内部ページと覚えておきましょう!

それでは、また!

 
質問や感想がある方は、TwitterのDM、リプ欄にコメントください!
その他CODE CLUB965のことで気になことがあれば無料で面談できますので、お気軽にお問い合わせください!