router プロパティ

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

base

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

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

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

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

Nuxt v2.15 以降では、実行時にこのプロパティの値を変更すると、既にビルドされているアプリケーションの設定が上書きされます。

export default {
  router: {
    base: '/app/'
  }
}

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

routeNameSplitter

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

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

export default {
  router: {
    routeNameSplitter: '/'
  }
}

extendRoutes

• 型: Function

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

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

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

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

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

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

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 モードにフォールバックするかどうか制御します。 Controls whether the router should fallback to hash mode when the browser does not support history.pushState but mode is set to history.

これを false に設定すると、基本的にすべてのルーターリンクのナビゲーションが IE9 でフルページリフレッシュされるようになります。これは、アプリがサーバーレンダリングされており、ハッシュモードのURLが SSR で動作しないため、IE9 で動作させる必要がある場合に便利です。

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

linkActiveClass

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

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

export default {
  router: {
    linkActiveClass: 'active-link'
  }
}

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

linkExactActiveClass

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

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

export default {
  router: {
    linkExactActiveClass: 'exact-active-link'
  }
}

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

linkPrefetchedClass

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

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

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

middleware

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

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

export default {
  router: {
    // ページごとに middleware/user-agent.js を実行します
    middleware: 'user-agent'
  }
}

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

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

mode

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

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

export default {
  router: {
    mode: 'hash'
  }
}

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

parseQuery / stringifyQuery

• 型: Function

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

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

prefetchLinks

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

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

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

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

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

特定のリンクで先読みを無効にしたい場合、no-prefetch プロパティが使えます。Nuxt 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 に設定してください：

export default {
  router: {
    prefetchLinks: false
  }
}

Nuxt 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 はリンク先ページのペイロードを自動的に先読みしインスタントナビゲーションを作成します。

prefetchPayloads を false に設定することで無効にできます：

export default {
  router: {
    prefetchPayloads: false
  }
}

scrollBehavior

• 型: Function

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

Nuxt のデフォルトの router.scrollBehavior.js ファイルは次の場所にあります：

packages/vue-app/template/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 の設定がそれぞれ有効な場合の動作です：

Route           Page
/               ~/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)

Route           Page
/               ~/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)

Route           Page
/               ~/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