ページ ディレクトリ

Nuxtは、Vue Routerを内部で使用してウェブアプリケーション内にルートを作成するためのファイルベースのルーティングを提供しています。

使用方法

ページはVueコンポーネントであり、Nuxtがデフォルトでサポートする有効な拡張子（.vue、.js、.jsx、.mjs、.ts、.tsxなど）を持つことができます。Nuxtは自動的に~/pages/ディレクトリ内の各ページに対してルートを作成します。

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

// https://vuejs.org/guide/extras/render-function.html
export default defineComponent({
  render() {
    return h("h1", "Index page");
  },
});

// https://nuxt.com/docs/examples/advanced/jsx
// https://vuejs.org/guide/extras/render-function.html#jsx-tsx
export default defineComponent({
  render() {
    return <h1>Index page</h1>;
  },
});

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

// ○ 正しい記述方法 
// ※templeteタグの次はdivタグを必ず記述する
<template>
  <div>
    <!-- このページには1つの単一のルート要素のみなので、正常に動作します。 -->
    Page content
  </div>
</template>

// × 下記は悪い例です 
// ※templateタグの次に、不要なコメントが存在している
<template>
  <!-- このページは、クライアントサイドのナビゲーション中にルートが変更されると、このコメント文があるために、レンダリングされません。 -->
  <div>Page content</div>
</template>

// × 下記は悪い例です 
// ※templateタグの次にdivタグが複数存在している
<template>
  <div>このページは…</div>
  <div>複数のルート要素を持っています。</div>
  <div>クライアントサイドのナビゲーション中にルートが変更されるとレンダリングされなくなります。</div>
</template>

動的なルート

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

もし、パラメータをオプションにしたい場合は、ダブルスクエアブラケットで囲む必要があります。例えば、~/pages/[[slug]]/index.vue や ~/pages/[[slug]].vue は、両方とも / や /test にマッチします。

例

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

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

<p>admins - 123</p>

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

  if (route.params.group === 'admins' && !route.params.id) {
    console.log('Warning! Make sure user is authenticated!')
  }
</script>

キャッチオール ルート

キャッチオールルートを必要とする場合は、[...slug].vue というようなファイルを作成します。これにより、そのパス以下のすべてのルートにマッチします。

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

<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'
      }
    ]
  }
]

<template>
  <div>
    <h1>I am the parent view</h1>
    <NuxtPage :foobar="123" />
  </div>
</template>

チャイルドルートキー

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

<template>
  <div>
    <h1>I am the parent view</h1>
    <NuxtPage :page-key="someKey" />
  </div>
</template>

<script setup lang="ts">
    definePageMeta({
        key: route => route.fullPath
    })
</script>

ページのメタデータ

アプリの各ルートにメタデータを定義したい場合があるかもしれません。definePageMeta マクロを使用することで、これを実現できます。このマクロは、<script> および<script setup>の両方で動作します。

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

<script setup lang="ts">
    const route = useRoute()
    console.log(route.meta.title) // My home page
</script>

<script setup lang="ts">
    import { someData } from '~/utils/example'

    const title = ref('')

    definePageMeta({
        title,  // This will create an error
        someData
    })
</script>

特別なメタデータ

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

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

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

  親ルートの状態を保持することが目的の場合は、次の構文を使用します：<NuxtPage keepalive />。また、<KeepAlive>に渡すプロップスを設定することもできます（詳細なリストはこちらを参照してください）。

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

• key
  上記を参照してください。
• layout
  ルートのレンダリングに使用するレイアウトを定義することができます。これは、false（レイアウトを無効にするため）、文字列、またはref/computedのいずれかであり、リアクティブにする場合はref/computedを使用できます。レイアウトについての詳細はこちらを参照してください。
• レイアウトトランジション と ページトランジション

  <transition>コンポーネントのトランジションプロパティを定義したり、特定のルートの<transition>ラッパーを無効にするために、nuxt.config.jsのpageTransitionとlayoutTransitionオプションを使用できます。これらのオプションを使用して、ページとレイアウトのトランジション効果をカスタマイズすることができます。

  プロパティのデフォルト値をnuxt.config.jsで設定することができます。

• middleware
  ページを読み込む前に適用するミドルウェアを定義できます。このミドルウェアは、一致する親/子ルートのミドルウェアと結合されます。ミドルウェアは文字列、関数（グローバルなbeforeガードのパターンに従った無名/インラインのミドルウェア関数）、または文字列/関数の配列として定義することができます。詳細については、名前付きミドルウェアに関するドキュメントをご覧ください。
• name
  ページのルートに名前を定義することができます。
• path
  ファイル名で表現することができないより複雑なパターンがある場合、パスマッチャーを定義することができます。詳細はvue-routerのドキュメントを参照してください。

カスタムメタデータの型

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

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

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

ナビゲーション

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

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

pagesフォルダー内のindex.vueページへの簡単なリンク：

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

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

Nuxt 3では、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>

カスタムルーティング

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

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

デフォルトでは、すべてのページはプロジェクトのルートにある1つのpagesディレクトリに配置されるべきです。しかし、Layersを使用してアプリのページをグループ化することができます。

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

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

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