使用法

ページはVueコンポーネントであり、Nuxtがサポートする任意の有効な拡張子を持つことができます（デフォルトでは.vue、.js、.jsx、.mjs、.ts、または.tsx）。

Nuxtは、~/pages/ディレクトリ内のすべてのページに対して自動的にルートを作成します。

<template>
  <h1>インデックスページ</h1>
</template>

pages/index.vueファイルは、アプリケーションの/ルートにマッピングされます。

app.vueを使用している場合は、現在のページを表示するために<NuxtPage/>コンポーネントを使用してください。

<template>
  <div>
    <!-- すべてのページで共有されるマークアップ、例: ナビゲーションバー -->
    <NuxtPage />
  </div>
</template>

ページは、ページ間のルート遷移を可能にするために単一のルート要素を持たなければなりません。HTMLコメントも要素と見なされます。

これは、ルートがサーバーレンダリングまたは静的生成されるときにその内容を正しく見ることができますが、クライアントサイドのナビゲーション中にそのルートに移動すると、ルート間の遷移が失敗し、ルートがレンダリングされないことを意味します。

単一のルート要素を持つページの例を以下に示します。

<template>
  <div>
    <!-- このページは正しく単一のルート要素を持っています -->
    ページコンテンツ
  </div>
</template>

動的ルート

角括弧内に何かを配置すると、それは動的ルートパラメータに変換されます。複数のパラメータを組み合わせたり、ファイル名やディレクトリ内で動的でないテキストを混在させることもできます。

パラメータを_オプション_にしたい場合は、二重角括弧で囲む必要があります。例えば、~/pages/[[slug]]/index.vueまたは~/pages/[[slug]].vueは、/と/testの両方にマッチします。

-| pages/
---| index.vue
---| users-[group]/
-----| [id].vue

上記の例では、コンポーネント内で$routeオブジェクトを介してgroup/idにアクセスできます。

<template>
  <p>{{ $route.params.group }} - {{ $route.params.id }}</p>
</template>

/users-admins/123に移動すると、次のようにレンダリングされます。

<p>admins - 123</p>

Composition APIを使用してルートにアクセスしたい場合は、Options APIのthis.$routeのようにルートにアクセスできるグローバルなuseRoute関数があります。

const route = useRoute()

if (route.params.group === 'admins' && !route.params.id) {
  console.log('警告！ユーザーが認証されていることを確認してください！')
}

キャッチオールルート

キャッチオールルートが必要な場合は、[...slug].vueのように名前を付けたファイルを使用して作成します。これにより、そのパスの下の_すべての_ルートにマッチします。

<template>
  <p>{{ $route.params.slug }}</p>
</template>

/hello/worldに移動すると、次のようにレンダリングされます。

<p>["hello", "world"]</p>

ネストされたルート

<NuxtPage>を使用してネストされたルートを表示することができます。

例:

-| pages/
---| parent/
-----| child.vue
---| parent.vue

このファイルツリーは次のルートを生成します。

[
  {
    path: '/parent',
    component: '~/pages/parent.vue',
    name: 'parent',
    children: [
      {
        path: 'child',
        component: '~/pages/parent/child.vue',
        name: 'parent-child'
      }
    ]
  }
]

child.vueコンポーネントを表示するには、pages/parent.vue内に<NuxtPage>コンポーネントを挿入する必要があります。

<template>
  <div>
    <h1>私は親ビューです</h1>
    <NuxtPage :foobar="123" />
  </div>
</template>

const props = defineProps(['foobar'])

console.log(props.foobar)

子ルートキー

<NuxtPage>コンポーネントが再レンダリングされるタイミングをより制御したい場合（例えば、トランジションのため）、pageKeyプロップを介して文字列または関数を渡すか、definePageMetaを使用してkey値を定義できます。

<template>
  <div>
    <h1>私は親ビューです</h1>
    <NuxtPage :page-key="route => route.fullPath" />
  </div>
</template>

または、次のようにします。

definePageMeta({
  key: route => route.fullPath
})

ルートグループ

場合によっては、ファイルベースのルーティングに影響を与えない方法で一連のルートをグループ化したいことがあります。この目的のために、括弧で囲まれたフォルダにファイルを配置できます - (と)。

例:

-| pages/
---| index.vue
---| (marketing)/
-----| about.vue
-----| contact.vue

これにより、アプリ内で/、/about、/contactページが生成されます。marketingグループはURL構造の目的では無視されます。

ページメタデータ

アプリ内の各ルートにメタデータを定義したい場合があります。これを行うには、definePageMetaマクロを使用します。これは<script>および<script>の両方で機能します。

definePageMeta({
  title: '私のホームページ'
})

このデータは、その後、アプリの他の部分でroute.metaオブジェクトからアクセスできます。

const route = useRoute()

console.log(route.meta.title) // 私のホームページ

ネストされたルートを使用している場合、これらのルートのページメタデータはすべて単一のオブジェクトにマージされます。ルートメタについての詳細は、vue-routerのドキュメントを参照してください。

defineEmitsやdefineProps（Vueドキュメントを参照）と同様に、definePageMetaはコンパイラマクロです。コンポーネント内で参照することはできません。代わりに、渡されたメタデータはコンポーネントの外に持ち上げられます。 したがって、ページメタオブジェクトはコンポーネントを参照できません。ただし、インポートされたバインディングや、ローカルで定義された純粋な関数を参照することはできます。

import { someData } from '~/utils/example'

function validateIdParam(route) {
  return route.params.id && !isNaN(Number(route.params.id))
}

const title = ref('')

definePageMeta({
  validate: validateIdParam,
  someData,
  title,    // これはしないでください。refはコンポーネントの外に持ち上げられます
})

特殊なメタデータ

もちろん、アプリ全体で独自の使用のためにメタデータを定義することは歓迎されます。しかし、definePageMetaで定義された一部のメタデータには特定の目的があります。

alias

ページのエイリアスを定義できます。これにより、異なるパスから同じページにアクセスできます。これは、vue-routerのドキュメントで定義されているように、文字列または文字列の配列にすることができます。

keepalive

definePageMetaでkeepalive: trueを設定すると、NuxtはページをVueの<KeepAlive>コンポーネントで自動的にラップします。これは、例えば、動的な子ルートを持つ親ルートで、ルート変更時にページの状態を保持したい場合に便利です。

親ルートの状態を保持することが目的の場合は、この構文を使用します: <NuxtPage keepalive />。また、<KeepAlive>に渡すプロップを設定することもできます（完全なリストを参照）。

このプロパティのデフォルト値をあなたのnuxt.configで設定できます。

key

上記を参照。

layout

ルートをレンダリングするために使用されるレイアウトを定義できます。これは、任意のレイアウトを無効にするためのfalse、文字列、または何らかの方法でリアクティブにしたい場合はref/computedにすることができます。レイアウトについての詳細。

layoutTransitionとpageTransition

ページとレイアウトをラップする<transition>コンポーネントのトランジションプロパティを定義することができます。または、そのルートの<transition>ラッパーを無効にするためにfalseを渡すことができます。渡すことができるオプションのリストを参照するか、トランジションの動作についての詳細を読むことができます。

これらのプロパティのデフォルト値をあなたのnuxt.configで設定できます。

middleware

このページを読み込む前に適用するミドルウェアを定義できます。これは、任意の親/子ルートで使用される他のすべてのミドルウェアとマージされます。これは、文字列、関数（グローバルbeforeガードパターンに従った匿名/インラインミドルウェア関数）、または文字列/関数の配列にすることができます。名前付きミドルウェアについての詳細。

name

このページのルートの名前を定義できます。

path

ファイル名で表現できるよりも複雑なパターンがある場合、パスマッチャーを定義できます。詳細はvue-routerのドキュメントを参照してください。

props

ページコンポーネントに渡されるプロップとしてルートparamsにアクセスできるようにします。詳細はvue-routerのドキュメントを参照してください。

カスタムメタデータの型付け

ページにカスタムメタデータを追加する場合、型安全な方法で行いたいかもしれません。definePageMetaで受け入れられるオブジェクトの型を拡張することが可能です。

declare module '#app' {
  interface PageMeta {
    pageType?: string
  }
}

// 型を拡張する際には、何かをインポート/エクスポートすることを常に確認することが重要です
export {}

ナビゲーション

アプリのページ間をナビゲートするには、<NuxtLink>コンポーネントを使用する必要があります。

このコンポーネントはNuxtに含まれているため、他のコンポーネントのようにインポートする必要はありません。

pagesフォルダ内のindex.vueページへのシンプルなリンク:

<template>
  <NuxtLink to="/">ホームページ</NuxtLink>
</template>

プログラムによるナビゲーション

NuxtはnavigateTo()ユーティリティメソッドを通じてプログラムによるナビゲーションを許可します。このユーティリティメソッドを使用すると、アプリ内でユーザーをプログラム的にナビゲートできます。これは、ユーザーからの入力を受け取り、アプリケーション全体を動的にナビゲートするのに最適です。この例では、ユーザーが検索フォームを送信したときに呼び出されるnavigate()というシンプルなメソッドがあります。

const name = ref('');
const type = ref(1);

function navigate(){
  return navigateTo({
    path: '/search',
    query: {
      name: name.value,
      type: type.value
    }
  })
}

クライアント専用ページ

.client.vueサフィックスを付けることで、ページをクライアント専用として定義できます。このページのコンテンツはサーバー上でレンダリングされません。

サーバー専用ページ

.server.vueサフィックスを付けることで、ページをサーバー専用として定義できます。クライアントサイドのナビゲーションを使用してページに移動できますが、vue-routerによって制御され、サーバーコンポーネントで自動的にレンダリングされます。つまり、ページをレンダリングするために必要なコードはクライアントサイドのバンドルには含まれません。

カスタムルーティング

アプリが大きくなり、より複雑になると、ルーティングにより多くの柔軟性が必要になるかもしれません。このため、Nuxtはルーター、ルート、およびルーターオプションをさまざまな方法でカスタマイズするために直接公開しています。

複数のページディレクトリ

デフォルトでは、すべてのページはプロジェクトのルートにある1つのpagesディレクトリにあるべきです。

ただし、Nuxt Layersを使用して、アプリのページをグループ化することができます。

-| some-app/
---| nuxt.config.ts
---| pages/
-----| app-page.vue
-| nuxt.config.ts

// some-app/nuxt.config.ts
export default defineNuxtConfig({
})

export default defineNuxtConfig({
  extends: ['./some-app'],
})

<template>
  <h1>ホームページ</h1>
</template>

pages/
  users/
    [id].vue

<template>
  <p>ユーザーID: {{ $route.params.id }}</p>
</template>

pages/
  parent.vue
  parent/
    child.vue

<template>
  <div>
    <h1>親ページ</h1>
    <NuxtPage />
  </div>
</template>

<template>
  <p>子ページの内容</p>
</template>

<!-- NG例 -->
<template>
  <div>要素1</div>
  <div>要素2</div>
</template>

<!-- OK例 -->
<template>
  <div>
    <div>要素1</div>
    <div>要素2</div>
  </div>
</template>

definePageMeta({
  title: 'ユーザープロファイル'
})

const route = useRoute()
watch(() => route.meta.title, (title) => {
  if (title) document.title = title
})

function validateId(route) {
  return route.params.id && !isNaN(Number(route.params.id))
}

definePageMeta({
  validate: validateId
})

definePageMeta({
  keepalive: true
})