Nuxt.jsで内部と外部リンクを設定する方法

2021年6月26日Vue.js

Nuxt.jsで内部と外部リンクを設定する方法を紹介します。

Nuxt.jsで内部と外部リンクを設定する方法

Nuxt.jsでは、

• aタグ
• router-link
• nuxt-link

を使うことができます。

<template>
  <section class="container">
    <!-- <a href="/products">Products</a> -->
    <!-- <router-link to="/products">Products</router-link> -->
    <nuxt-link to="/products">Products</nuxt-link>
  </section>
</template>

Nuxt.jsでは、Static App(プリレンダリング)でもSPAでもSSRでも一度ロードされたら、SPAとして使うことができます。
aタグを使うと、レンダリングして新しくサーバーからリクエストしたページを取得します。
SPAの恩恵を受けたい場合は、router-linkやnuxt-linkを使います。
Nuxt.jsを使っている場合、nuxt-linkはrouter-linkの拡張版なので、nuxt-linkを使いましょう。そうすることで、リスエストを送ることなく、ブラウザで処理することができます。

外部リンクにアクセスしたい場合は、aタグを使います。