Skip to content

Latest commit

 

History

History
452 lines (346 loc) · 14.1 KB

routing.md

File metadata and controls

452 lines (346 loc) · 14.1 KB
Raw
title description
ルーティング
Nuxt.js はウェブアプリケーションのルーティングを生成するためにファイルシステムを利用します。

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

ページ間を遷移するためには <nuxt-link> コンポーネントの使用を推奨します。

例:

<template>
  <nuxt-link to="/">Home page</nuxt-link>
</template>

ルーティングの基礎

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

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

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

未知の動的でネストされたルート

もし URL 構造の深さが不明な場合は、ネストされたパスに動的にマッチさせる _.vue ファイルを使用することができます。 これは より詳細な リクエストにマッチしなかったリクエストをハンドリングします。

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

pages/
--| people/
-----| _id.vue
-----| index.vue
--| _.vue
--| index.vue

次のようにリクエストをハンドリングします:

Path File
/ index.vue
/people people/index.vue
/people/123 people/_id.vue
/about _.vue
/about/careers _.vue
/about/careers/chicago _.vue

注意: 404 ページのハンドリングは _.vue ページのロジックに依存します。404 リダイレクトについての詳細はこちらを参照してください。

名前付きビュー

名前付きビューをレンダリングするために <nuxt name="top"/> または <nuxt-child name="top"/> コンポーネントを layout/page 内で使用できます。 名前付きビューを特定するには nuxt.config.js ファイルのルータ設定の拡張が必要です。

export default {
  router: {
    extendRoutes(routes, resolve) {
      let index = routes.findIndex(route => route.name === 'main')
      routes[index] = {
        ...routes[index],
        components: {
          default: routes[index].component,
          top: resolve(__dirname, 'components/mainTop.vue')
        },
        chunkNames: {
          top: 'components/mainTop'
        }
      }
    }
  }
}

これには関連する2つのプロパティ components と chunkNames を拡張する必要があります。上記の設定例の名前付きビューは top という名前を持っています。

名前付きビューの例が見たい場合は 名前付きビューの例 を参照してください。

SPA フォールバック

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

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

export default {
  generate: {
    fallback: true, // デフォルトの '200.html' の代わりに '404.html' を使用したい場合
    fallback: 'my-fallback/file.html' // ホスティングサービスで特定のロケーションを指定する必要がある場合
  }
}

Surge 向けの実装

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

GitHub Pages と Netlify 向けの実装

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

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

Firebase ホスティングは 404.html ファイルを自動的に処理できるため、generate.fallback を true に設定すると、404 のデフォルトレスポンスコードと一緒にエラーページがレンダリングされます。

トランジション

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

グローバルな設定

情報: 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 配列に CSS ファイルのパスを追加します:

export default {
  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.js は auth ミドルウェアになります）

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

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

ユニバーサルモードの場合、ミドルウェアはサーバサイドでは一度だけ呼び出され（Nuxt アプリケーションへの最初のリクエスト時、またはページの再読込み時）クライアントサイドでは他のルートへ移動したときに呼び出されます。SPA モードの場合、ミドルウェアはクライアントサイドで最初のリクエスト時と他のルートへ移動したときに呼び出されます。

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

  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 で router.middleware キーを使います:

nuxt.config.js

export default {
  router: {
    middleware: 'stats'
  }
}

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

同様に、特定のレイアウトもしくはページ内にもミドルウェアを追加することができます:

pages/index.vue または layouts/default.vue

export default {
  middleware: 'stats'
}

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