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 フォールバックを有効にすることができます。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 は 200.html
と 404.html
の両方をハンドリングできます。generate.fallback
はデフォルトで 200.html
に設定されるので、変更する必要はありません。
GitHub Pages と Netlify は 404.html
ファイルを自動的に認識するため、設定すべきことは generate.fallback
を true
にするだけです!
Firebase ホスティング上でフォールバックを使用するためには、generate.fallback
を true
にし、以下の設定を使用します。 (さらに詳しく):
{
"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
配列に 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 モードの場合、ミドルウェアはクライアントサイドで最初のリクエスト時と他のルートへ移動したときに呼び出されます。
ミドルウェアは下記の順に実行されます:
nuxt.config.js
(ファイル内の順)ミドルウェアは非同期に実行することもできます。そのためには、単に 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 を参照してください。
間違いを見つけた、またはドキュメントに貢献したいですか? GitHub でこのページを編集する