ルーティング

多くのウェブサイトでは単一のページではなく、複数ページを持っています。例えばホームページ、概要ページ、お問い合わせページなどです。これらのページを表示するにはルーターが必要です。

自動的に生成されるルート

多くのウェブサイトでは単一のページではなく、複数ページ (例えばホームページ、概要ページ、お問い合わせページなど) を持っています。これらのページを表示するにはルーターが必要です。そこで vue-router の出番です。Vue アプリケーションで動作させる際に、設定ファイル(例えば、router.js)を設定し、全てのルートを手動で追加しなければなりません。Nuxt では pages ディレクトリにある Vue ファイルに基づいて、vue-router の設定を自動的に生成します。つまり、ルーターの設定を書く必要はもうありません！ Nuxt はまた全てのルートに対して自動でコード分割を行います。

つまり、アプリケーションでルーティングを行うのに必要なことは pages フォルダに .vue ファイルを作成するだけです。

ナビゲーション

アプリケーションのページ間を遷移するには、NuxtLink コンポーネントを使用する必要があります。このコンポーネントは Nuxt に含まれているため、他のコンポーネントのようにインポートする必要はありません。HTML の <a> タグに似ていますが、href="/about" の代わりに to="/about" を使用します。もし以前に vue-router を使ったことがある場合は、<NuxtLink> を <RouterLink> の代わりと考えることができます。

pages フォルダにある index.vue へのシンプルなリンク:

<template>
  <NuxtLink to="/">Home page</NuxtLink>
</template>

サイト内の全てのページへのリンクに <NuxtLink> を使ってください。他のウェブサイトへのリンクがある場合は <a> タグを使ってください。例は以下を参照してください:

<template>
  <main>
    <h1>Home page</h1>
    <NuxtLink to="/about">
      About (internal link that belongs to the Nuxt App)
    </NuxtLink>
    <a href="https://v2.nuxt.com">External Link to another page</a>
  </main>
</template>