NUXTJS

Get Started
Concepts
Features
Directory Structure

Configuration Glossary

Internals Glossary
Components Glossary

router プロパティ

router プロパティを使って Nuxt.js ルーター（vue-router）をカスタマイズできます。

base

  • 型: String
  • デフォルト: '/'

アプリケーションのベースの URL です。例えば、単一ページアプリケーション全体が /app/ 下に配置される場合、base の値は '/app/' を指定します。

これは、より大きな Web サイト内から、Nuxt を別のコンテキストルートとして提供する必要がある場合に役立ちます。フロントプロキシウェブサーバーを設定する場合としない場合があることに注意してください。

router.base にリダイレクトしたい場合、Hook を使ってリダイレクトすることができます。ルートでない場合 router.base にリダイレクトさせるを参照してください。

nuxt.config.js
export default {
  router: {
    base: '/app/'
  }
}

base が設定されている場合、Nuxt.js はドキュメントヘッダー <base href="{{ router.base }}"/> も追加します。

このオプションは直接 vue-router の base に渡されます。

routeNameSplitter

  • 型: String
  • デフォルト: '-'

Nuxt.js が使うルート名間の区切り文字を変更したいかもしれません。その場合は設定ファイルの routeNameSplitter オプションを介して変更できます。ページファイル pages/posts/_id.vue があると仮定します。Nuxt はプログラムでルート名（今回の場合は posts-id）を生成します。routeNameSplitter の設定を / に変更するとルート名は posts/id に変更されます。

nuxt.config.js
export default {
  router: {
    routeNameSplitter: '/'
  }
}

extendRoutes

  • 型: Function

Nuxt.js によって作成されたルートを拡張したいことがあるかもしれません。その場合は extendRoutes オプションを介して拡張できます。

nuxt.config.js
export default {
  router: {
    extendRoutes(routes, resolve) {
      routes.push({
        name: 'custom',
        path: '*',
        component: resolve(__dirname, 'pages/404.vue')
      })
    }
  }
}

ルートをソートしたい場合、@nuxt/utils の sortRoutes(routes) 関数を使えます:

nuxt.config.js
import { sortRoutes } from '@nuxt/utils'
export default {
  router: {
    extendRoutes(routes, resolve) {
      // ルートをここに追加する ...

      // それからソートする
      sortRoutes(routes)
    }
  }
}

ルートのスキーマは vue-router スキーマを尊重してください。

名前付きビューを使うルートを追加する場合、対応する名前付き components の chunkNames の追加を忘れないでください。

nuxt.config.js
export default {
  router: {
    extendRoutes(routes, resolve) {
      routes.push({
        path: '/users/:id',
        components: {
          default: resolve(__dirname, 'pages/users'), // または routes[index].component
          modal: resolve(__dirname, 'components/modal.vue')
        },
        chunkNames: {
          modal: 'components/modal'
        }
      })
    }
  }
}

fallback

  • 型: boolean
  • デフォルト: false

history.pushState がサポートされていないブラウザにおいて、モードが history に設定されているとき、ルーターを hash モードにフォールバックするかどうか制御します。

ケーションがサーバサイドレンダリングされ、IE9 で動作する必要がある場合に便利です。なぜなら、サーバーサイドレンダリングではハッシュモードの URL が機能しないためです。

このオプションは直接 vue-router の fallback に渡されます。

linkActiveClass

  • 型: String
  • デフォルト: 'nuxt-link-active'

<nuxt-link> のデフォルトの active class をグローバルに設定します。

nuxt.config.js
export default {
  router: {
    linkActiveClass: 'active-link'
  }
}

このオプションは直接 vue-router の linkActiveClass に渡されます。

linkExactActiveClass

  • 型: String
  • デフォルト: 'nuxt-link-exact-active'

<nuxt-link> のデフォルトの active class をグローバルに設定します。

nuxt.config.js
export default {
  router: {
    linkExactActiveClass: 'exact-active-link'
  }
}

このオプションは直接 vue-router の linkExactActiveClass に渡されます。

linkPrefetchedClass

  • 型: String
  • デフォルト: false

<nuxt-link> の prefetch クラスをグローバルに設定します（デフォルトは無効の機能）。

nuxt.config.js
export default {
  router: {
    linkPrefetchedClass: 'nuxt-link-prefetched'
  }
}

middleware

  • 型: String または Array
    • 要素: String

アプリケーションのページごとにデフォルトのミドルウェアを設定します。

nuxt.config.js
export default {
  router: {
    // ページごとに middleware/user-agent.js を実行します
    middleware: 'user-agent'
  }
}
middleware/user-agent.js
export default function (context) {
  // userAgent プロパティを context（`asyncData` と `fetch` メソッドで利用できます）内に追加します
  context.userAgent = process.server
    ? context.req.headers['user-agent']
    : navigator.userAgent
}

ミドルウェアについてより深く理解するために、ミドルウェアのドキュメントを参照してください。

mode

  • 型: String
  • デフォルト: 'history'

ルーティングのモードを設定します。サーバーサイドレンダリングのためにこの設定を変更することはおすすめしません。

nuxt.config.js
export default {
  router: {
    mode: 'hash'
  }
}

このオプションは直接 vue-router の mode に渡されます。

parseQuery / stringifyQuery

  • 型: Function

カスタムクエリ構文解析関数/文字列化関数を提供します。デフォルトを上書きします。

このオプションは直接 vue-router の parseQuery / stringifyQuery に渡されます。

この機能は Nuxt v2.4.0 で追加されました

  • 型: Boolean
  • デフォルト: true

viewport（ブラウザの表示領域）内でリンクが検出された時にコード分割されたページを先読みする <nuxt-link> の設定をします。IntersectionObserver がサポートされている必要があります（Caniuse を参照してください）。

この機能を Polyfill.io のようなサービスに条件付きで埋め込むことをおすすめします:

nuxt.config.js
export default {
  head: {
    script: [
      {
        src:
          'https://polyfill.io/v3/polyfill.min.js?features=IntersectionObserver',
        body: true
      }
    ]
  }
}

特定のリンクで先読みを無効にしたい場合、no-prefetch プロパティが使えます。Nuxt.js v2.10.0 からは prefetch プロパティ（false に設定）も使えます:

<nuxt-link to="/about" no-prefetch>About page not prefetched</nuxt-link>
<nuxt-link to="/about" :prefetch="false">About page not prefetched</nuxt-link>

全てのリンクで先読みを無効にしたい場合は、prefetchLinks を false に設定してください:

nuxt.config.js
export default {
  router: {
    prefetchLinks: false
  }
}

Nuxt.js v2.10.0 からは prefetchLinks を false に設定した上で特定のリンクを先読みしたい場合、prefetch プロパティが使えます:

<nuxt-link to="/about" prefetch>About page prefetched</nuxt-link>

prefetchPayloads

v2.13.0 で追加された機能で、静的なターゲットでのみ利用できます。

  • 型: Boolean
  • デフォルト: true

target: 'static' に設定した上で nuxt generate を使う場合、Nuxt はページごとに payload.js を生成します。

このオプションを有効にすると、viewport に <nuxt-link> が表示された時に Nuxt はリンク先ページのペイロードを自動的に先読みしインスタントナビゲーションを作成します。

このオプションの有効化は prefetchLinks オプションに依存します。

prefetchPaylods を false に設定することで無効にできます:

nuxt.config.js
export default {
  router: {
    prefetchPayloads: false
  }
}

scrollBehavior

  • 型: Function

scrollBehavior オプションを使って、ページ間のスクロール位置についての独自の振る舞いを定義できます。このメソッドはページがレンダリングされるたびに毎回呼び出されます。詳細は vue-router のスクロールの振る舞いのドキュメントを参照してください。

v2.9.0 以降、ファイルを使用してルーターの scrollBehavior を上書きすることができます。このファイルは ~/app/router.scrollBehavior.js に配置する必要があります（注意: Windows ではファイル名の大文字と小文字が区別されます）。

Nuxt のデフォルトの router.scrollBehavior.js ファイルは次の場所にあります: packages/vue-app/template/router.scrollBehavior.js

すべてのルートにおいて強制的にトップまでスクロールさせる例:

app/router.scrollBehavior.js

app/router.scrollBehavior.js
export default function (to, from, savedPosition) {
  return { x: 0, y: 0 }
}

trailingSlash

  • 型: Boolean または undefined
  • デフォルト: undefined
  • 利用できる最小バージョン: v2.10

このオプションを true に設定した場合、末尾のスラッシュがすべてのルートに追加されます。もし false に設定した場合は末尾のスラッシュは削除されます。

注意: このオプションは準備なしに設定すべきではなく、徹底的にテストする必要があります。router.trailingSlash に undefined 以外の値を設定すると、反対のルートは機能しなくなります。したがって、301 リダイレクトを設定し、内部リンクを正しく適応させる必要があります。trailingSlash を true に設定した場合、example.com/abc/ のみが動作し example.com/abc は動作しません。false に設定する場合はその逆になります。

動作例（子ルートあり）

ディレクトリ構造:

-| pages/
---| index.vue
---| posts.vue
---| posts/
-----| _slug.vue
-----| index.vue

これは trailingSlash の設定がそれぞれ有効な場合の動作です:

ルート          ページ
/               ~/pages/index.vue
/posts          ~/pages/posts.vue (parent) + ~/pages/posts.vue (child route)
/posts/         ~/pages/posts.vue (parent) + ~/pages/posts.vue (child route)
/posts/foo      ~/pages/posts.vue (parent) + ~/pages/_slug.vue (child route)
/posts/foo/     ~/pages/posts.vue (parent) + ~/pages/_slug.vue (child route)

ルート          ページ
/               ~/pages/index.vue
/posts          404
/posts/         ~/pages/posts.vue (parent) + ~/pages/index.vue (child route)
/posts/foo      404
/posts/foo/     ~/pages/posts.vue (parent) + ~/pages/_slug.vue (child route)

ルート          ページ
/               ~/pages/index.vue
/posts          ~/pages/posts.vue
/posts/         ~/pages/posts.vue (parent) + ~/pages/index.vue (child route)
/posts/foo      ~/pages/posts.vue (parent) + ~/pages/_slug.vue (child route)
/posts/foo/     404
rootDir runtimeConfig

Contributors

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

On this page

Platinum Sponsors

StoryblokMoovwebShip Shape Support Us