router プロパティ

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

base

  • タイプ: 文字列
  • デフォルト: '/'

アプリケーションのベース URL です。例えばシングルページアプリケーション全体を /app/ 配下で配信したい場合は base に '/app/' を設定します。

例(nuxt.config.js):

module.exports = {
  router: {
    base: '/app/'
  }
}

base がセットされているときは Nuxt.js はドキュメントのヘッダーに <base href="{{ router.base }}"/> を追加します。

このオプションは vue-router の Router コンストラクタ に直接付与されます。

mode

  • タイプ: 文字列
  • デフォルト: 'history'

ルーティングのモードを設定します。サーバーサイドレンダリングのため、この設定を変更することは非推奨です。

例(nuxt.config.js):

module.exports = {
  router: {
    mode: 'hash'
  }
}

このオプションは直接 vue-router の Router コンストラクタ に渡されます。

linkActiveClass

  • タイプ: 文字列
  • デフォルト: 'nuxt-link-active'

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

例(nuxt.config.js):

module.exports = {
  router: {
    linkActiveClass: 'active-link'
  }
}

このオプションは vue-router の Router コンストラクタ に直接付与されます。

linkExactActiveClass

  • タイプ 文字列
  • デフォルト: 'nuxt-link-exact-active'

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

例 (nuxt.config.js):

module.exports = {
  router: {
    linkExactActiveClass: 'exact-active-link'
  }
}

このオプションは vue-router Router constructor に直接付与されます.

scrollBehavior

  • タイプ: 関数

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

デフォルトでは scrollBehavior オプションは次のようにセットされています:

const scrollBehavior = (to, from, savedPosition) => {
  // savedPosition は popState ナビゲーションでのみ利用できます
  if (savedPosition) {
    return savedPosition
  } else {
    let position = {}
    // 子パスが見つからないとき
    if (to.matched.length < 2) {
      // ページのトップへスクロールする
      position = { x: 0, y: 0 }
    }
    else if (to.matched.some((r) => r.components.default.options.scrollToTop)) {
      // 子パスのひとつが scrollToTop オプションが true にセットされているとき
      position = { x: 0, y: 0 }
    }
    // アンカーがあるときは、セレクタを返すことでアンカーまでスクロールする
    if (to.hash) {
      position = { selector: to.hash }
    }
    return position
  }
}

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

nuxt.config.js

module.exports = {
  router: {
    scrollBehavior: function (to, from, savedPosition) {
      return { x: 0, y: 0 }
    }
  }
}

このオプションは vue-router の Router コンストラクタ に直接付与されます。

middleware

  • タイプ: 文字列 または 配列
    • 要素: 文字列

アプリケーションのすべてのページに対してデフォルトのミドルウェアをセットします。

例:

nuxt.config.js

module.exports = {
  router: {
    // すべてのページで middleware/user-agent.js を実行します
    middleware: 'user-agent'
  }
}

middleware/user-agent.js

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

ミドルウェアについてより深く理解するには ミドルウェア ガイドを参照してください。

extendRoutes

  • タイプ: 関数

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

独自のルートを追加する例:

nuxt.config.js

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

ルートのスキーマは vue-router のスキーマを尊重すべきです。

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