pages

Nuxtは、ウェブアプリケーション内でルートを作成するためのファイルベースのルーティングを提供します。
アプリケーションのバンドルサイズを削減するため、このディレクトリはオプションであり、vue-routerapp.vueのみを使用する場合、含まれません。ページシステムを強制するには、nuxt.configでpages: trueを設定するか、router.options.tsを持ちます。

使用方法

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

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

<template>
  <h1>Index page</h1>
</template>

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

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

app/app.vue
<template>
  <div>
    <!-- Markup shared across all pages, ex: NavBar -->
    <NuxtPage />
  </div>
</template>

ページ間でのルートトランジションを可能にするために、ページは単一のルート要素を持つ必要があります。HTMLコメントも要素とみなされます。

これは、ルートがサーバーレンダリングまたは静的生成された場合、そのコンテンツが正しく表示されますが、クライアントサイドナビゲーション中にそのルートに移動すると、ルート間のトランジションが失敗し、ルートがレンダリングされないことがわかります。

単一のルート要素を持つページの例をいくつか示します。

<template>
  <div>
    <!-- This page correctly has only one single root element -->
    Page content
  </div>
</template>

動的ルート

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

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

ディレクトリ構造
-| pages/
---| index.vue
---| users-[group]/
-----| [id].vue

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

app/pages/users-[group]/[id].vue
<template>
  <p>{{ $route.params.group }} - {{ $route.params.id }}</p>
</template>

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

<p>admins - 123</p>

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

<script setup lang="ts">
const route = useRoute()

if (route.params.group === 'admins' && !route.params.id) {
  console.log('Warning! Make sure user is authenticated!')
}
</script>
名前付き親ルートは、ネストされた動的ルートよりも優先されます。/foo/helloルートの場合、~/pages/foo.vueは~/pages/foo/[slug].vueよりも優先されます。
/fooと/foo/helloを異なるページと一致させるには、~/pages/foo/index.vueと~/pages/foo/[slug].vueを使用します。

キャッチオールルート

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

app/pages/[...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コンポーネントを表示するには、app/pages/parent.vue内に<NuxtPage>コンポーネントを挿入する必要があります。

pages/parent.vue
<template>
  <div>
    <h1>I am the parent view</h1>
    <NuxtPage :foobar="123" />
  </div>
</template>
pages/parent/child.vue
<script setup lang="ts">
const props = defineProps({
  foobar: String,
})

console.log(props.foobar)
</script>

子ルートキー

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

pages/parent.vue
<template>
  <div>
    <h1>I am the parent view</h1>
    <NuxtPage :page-key="route => route.fullPath" />
  </div>
</template>

または、別の方法として

pages/parent/child.vue
<script setup lang="ts">
definePageMeta({
  key: route => route.fullPath,
})
</script>
Docs > 4 X > Examples > Routing > Pagesでライブの例を読んで編集してください。

ルートグループ

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

例：

ディレクトリ構造
-| pages/
---| index.vue
---| (marketing)/
-----| about.vue
-----| contact.vue

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

ページメタデータ

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

<script setup lang="ts">
definePageMeta({
  title: 'My home page',
})
</script>

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

<script setup lang="ts">
const route = useRoute()

console.log(route.meta.title) // My home page
</script>

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

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

リアクティブなデータや副作用を引き起こす関数を参照しないように注意してください。これは予期せぬ動作につながる可能性があります。
<script setup lang="ts">
import { someData } from '~/utils/example'

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

const title = ref('')

definePageMeta({
  validate: validateIdParam,
  someData,
  title, // do not do this, the ref will be hoisted out of the component
})
</script>

特別なメタデータ

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

alias

ページエイリアスを定義できます。これにより、異なるパスから同じページにアクセスできます。これは、vue-routerのドキュメント.

keepalive

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

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

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

キー

上記を参照.

レイアウト

ルートをレンダリングするために使用されるレイアウトを定義できます。これは、レイアウトを無効にする場合は`false`、文字列、または何らかの形でリアクティブにしたい場合はref/computedのいずれかになります。レイアウトの詳細はこちら。

layoutTransitionおよびpageTransition

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

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

middleware

このページをロードする前に適用するミドルウェアを定義できます。これは、一致するすべての親/子ルートで使用される他のすべてのミドルウェアとマージされます。文字列、関数（グローバルビフォアガードパターンに従う匿名/インラインミドルウェア関数）、または文字列/関数の配列のいずれかになります。名前付きミドルウェアの詳細はこちら。

name

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

パス

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

プロップ

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

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

ページにカスタムメタデータを追加する場合、タイプセーフな方法で行うことをお勧めします。definePageMetaが受け入れるオブジェクトの型を拡張することが可能です。

index.d.ts
declare module '#app' {
  interface PageMeta {
    pageType?: string
  }
}

// It is always important to ensure you import/export something when augmenting a type
export {}

ナビゲーション

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

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

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

<template>
  <NuxtLink to="/">Home page</NuxtLink>
</template>
<NuxtLink>の使用法について詳しく学ぶ。

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

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

navigateToを常にawaitするか、関数から結果を返すことで結果を連鎖させてください。
<script setup lang="ts">
const name = ref('')
const type = ref(1)

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

クライアント専用ページ

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

サーバー専用ページ

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

サーバー専用ページには、単一のルート要素が必要です。（HTMLコメントも要素とみなされます。）

カスタムルーティング

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

Docs > 4 X > Guide > Recipes > Custom Routingで詳細を読む。

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

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

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

ディレクトリ構造
-| some-app/
---| nuxt.config.ts
---| pages/
-----| app-page.vue
-| nuxt.config.ts
some-app/nuxt.config.ts
// some-app/nuxt.config.ts
export default defineNuxtConfig({
})
nuxt.config.ts
export default defineNuxtConfig({
  extends: ['./some-app'],
})
Docs > 4 X > Guide > Going Further > Layersで詳細を読む。