ルーティング

Nuxt.js は pages ディレクトリ内の Vue ファイルの木構造に沿って、自動的に vue-router の設定を生成します。

ルーティングの基礎

下記のようなファイルの木構造のとき:

pages/
--| user/
-----| index.vue
-----| one.vue
--| index.vue

自動的に以下が生成されます:

router: {
  routes: [
    {
      name: 'index',
      path: '/',
      component: 'pages/index.vue'
    },
    {
      name: 'user',
      path: '/user',
      component: 'pages/user/index.vue'
    },
    {
      name: 'user-one',
      path: '/user/one',
      component: 'pages/user/one.vue'
    }
  ]
}

動的なルーティング

パラメータを使って動的なルーティングを定義するには .vue ファイル名またはディレクトリ名に アンダースコアのプレフィックス を付ける必要があります。

下記のような木構造のとき:

pages/
--| _slug/
-----| comments.vue
-----| index.vue
--| users/
-----| _id.vue
--| index.vue

自動的に以下が生成されます:

router: {
  routes: [
    {
      name: 'index',
      path: '/',
      component: 'pages/index.vue'
    },
    {
      name: 'users-id',
      path: '/users/:id?',
      component: 'pages/users/_id.vue'
    },
    {
      name: 'slug',
      path: '/:slug',
      component: 'pages/_slug/index.vue'
    },
    {
      name: 'slug-comments',
      path: '/:slug/comments',
      component: 'pages/_slug/comments.vue'
    }
  ]
}

user-id と名付けられたルートに :id? というパスがありますが、これはこの :id が必須ではないことを表します。もし必須にしたい場合は users/_id ディレクトリ内に index.vue ファイルを作成してください。

警告: generate コマンドでは 動的なルーティング は無視されます。: generate 設定 API

ルーティングのパラメータのバリデーション

Nuxt.js では、動的なルーティングをするコンポーネント内に、パラメータをバリデーションするメソッドを定義することができます。

例えば pages/users/_id.vue 内にこのように書きます:

export default {
  validate ({ params }) {
    // 数値でなければならない
    return /^\d+$/.test(params.id)
  }
}

もしバリデーションのメソッドが true または true に解決する Promise を返さない、またはエラーをスローした場合は、Nuxt.js は自動的に 404 エラーページあるいはエラーの場合 500 エラーページをロードします。

バリデーションのメソッドについてより深く理解したい場合は ページバリデーションの API を参照してください。

ネストされたルート

Nuxt.js では vue-router の子ルートを使ってルートをネストさせることができます。

ネストされたルートの親コンポーネントを定義するには、子ビューを含む ディレクトリと同じ名前 の Vue ファイルを作成する必要があります。

警告: <nuxt-child> を親コンポーネント内 (.vue ファイル内) に書くことを忘れないでください。

下記のようなファイルの木構造のとき:

pages/
--| users/
-----| _id.vue
-----| index.vue
--| users.vue

自動的に以下が生成されます:

router: {
  routes: [
    {
      path: '/users',
      component: 'pages/users.vue',
      children: [
        {
          path: '',
          component: 'pages/users/index.vue',
          name: 'users'
        },
        {
          path: ':id',
          component: 'pages/users/_id.vue',
          name: 'users-id'
        }
      ]
    }
  ]
}

動的でネストされたルート

あまり頻繁に使うべきではありませんが、Nuxt.js では動的な親ルーティングの中に動的な子ルーティングを持つことが可能です。

下記のようなファイルの木構造のとき:

pages/
--| _category/
-----| _subCategory/
--------| _id.vue
--------| index.vue
-----| _subCategory.vue
-----| index.vue
--| _category.vue
--| index.vue

自動的に以下が生成されます:

router: {
  routes: [
    {
      path: '/',
      component: 'pages/index.vue',
      name: 'index'
    },
    {
      path: '/:category',
      component: 'pages/_category.vue',
      children: [
        {
          path: '',
          component: 'pages/_category/index.vue',
          name: 'category'
        },
        {
          path: ':subCategory',
          component: 'pages/_category/_subCategory.vue',
          children: [
            {
              path: '',
              component: 'pages/_category/_subCategory/index.vue',
              name: 'category-subCategory'
            },
            {
              path: ':id',
              component: 'pages/_category/_subCategory/_id.vue',
              name: 'category-subCategory-id'
            }
          ]
        }
      ]
    }
  ]
}

SPA フォールバック

動的なルーティングに対しても SPA フォールバックを有効にすることができます。Nuxt.js は mode: 'spa' を使って生成された index.html ファイルと同様のファイルを出力します。多くの静的ホスティングサービスは、一致するファイルがない場合に SPA テンプレートを使用するよう設定できます。head 情報や HTML は含まれませんが、API からデータをロードし解決します。

nuxt.config.js で SPA フォールバックを有効化:

module.exports = {
  generate: {
    fallback: true, // '404.html' を使用したい場合
    fallback: 'my-fallback/file.html' // ホスティングサービスで特定のロケーションを指定する必要がある場合
  }
}

Surge 向けの実装

Surge は 200.html404.html の両方をハンドリングできますgenerate.fallback はデフォルトで 200.html に設定されるので、変更する必要はありません。

GitHub Pages と Netlify 向けの実装

GitHub Pages と Netlify は 404.html ファイルを自動的に認識するため、設定すべきことはgenerate.fallbacktrue にするだけです!

Firebase ホスティング向けの実装

Firebase ホスティングを使うためには、generate.fallbacktrue にし、以下の設定を使用します。 (さらに詳しく):

{
  "hosting": {
    "public": "dist",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/404.html"
      }
    ]
  }
}

トランジション

Nuxt.js では コンポーネントを使って、ページ間を遷移する際のトランジション/アニメーションを行うことができます。

グローバルな設定

情報: Nuxt.js のデフォルトのトランジション名は "page"です。

アプリケーションのすべてのページでフェードさせるトランジションを定義には、ルーティング全体に適用されている CSS ファイルが必要です。まずは assets ディレクトリ内にファイルを作成するところから始めます:

assets/main.css 内にグローバルな CSS を書きます:

.page-enter-active, .page-leave-active {
  transition: opacity .5s;
}
.page-enter, .page-leave-to {
  opacity: 0;
}

nuxt.config.js ファイルに CSS ファイルのパスを指定します:

module.exports = {
  css: [
    'assets/main.css'
  ]
}

トランジションについてより深く理解したい場合は トランジション設定 API を参照してください。

特定のページに対する設定

transition プロパティを使うことで、特定のページのみに対してカスタムトランジションを定義することもできます。

assets/main.css 内に新しい CSS 定義を追加します:

.test-enter-active, .test-leave-active {
  transition: opacity .5s;
}
.test-enter, .test-leave-active {
  opacity: 0;
}

それから、このページトランジションを利用するためのクラス名を transition プロパティで指定します:

export default {
  transition: 'test'
}

トランジションプロパティについてより深く理解したい場合は ページトランジション API を参照してください。

ミドルウェア

ミドルウェアを使うと、特定のページやいくつかのページのグループがレンダリングされる前に実行されるカスタム関数を定義することができます。

ミドルウェアは middleware/ ディレクトリに入れます。 ファイル名はミドルウェアの名前となります(middleware/auth.jsauth ミドルウェアになります)

ミドルウェアは第一引数として コンテキスト を受け取ります:

export default function (context) {
  context.userAgent = process.server ? context.req.headers['user-agent'] : navigator.userAgent
}

ミドルウェアは下記の順に実行されます:

  1. nuxt.config.js
  2. マッチしたレイアウト
  3. マッチしたページ

ミドルウェアは非同期に実行することもできます。そのためには、単に Promise を返却するか、第2引数の callback を使用します:

middleware/stats.js

import axios from 'axios'

export default function ({ route }) {
  return axios.post('http://my-stats-api.com', {
    url: route.fullPath
  })
}

そして nuxt.config.js やレイアウトもしくはページ内で middleware キーを使います:

nuxt.config.js

module.exports = {
  router: {
    middleware: 'stats'
  }
}

stats ミドルウェアはすべてのルート変更時に呼び出されるようになります。

ミドルウェアを使った実際の例を見たい場合は GitHub 上にある example-auth0 を参照してください。

間違いを見つけた、またはドキュメントに貢献したいですか? GitHub でこのページを編集する