複数のページを切り替える、Nuxt.jsのルーティング機能を学ぼう

JavaScriptフレームワーク「Vue.js」と「Nuxt.js」の活用 第3回

ネストしたルート

　Nuxt.jsでは、あるパス（例えば「/Android」）に対応する親ページに、サブパス（例えば「/Android/Samsung」）に対応する子ページを埋め込んで表示させることができます。このような例を図7のサンプルで説明します。

図7：ネストしたルートのサンプル（p003-nest）

　このサンプルでの、pagesフォルダー配下の配置を図8に示します。親ページのファイル（/pages/Android.vue）と同名のフォルダー（/pages/Android）を作成して、その中に子ページのファイル（/pages/Android/_vendor.vue）を配置します。

図8：図7のサンプルでのpagesフォルダー配下の配置（p003-nest）

　親ページのファイル内容はリスト5の通りです。（1）の<nuxt-child>タグ部分に子ページが表示されます。

［リスト5］ネストしたルートの親ページ（p003-nest/pages/Android.vue）

<template>
  <div class="parent">
    <h1>注目Android</h1>
    <p>この秋冬、注目のAndroidスマホを紹介します。</p>
    <div>----↓ここに子ページを表示↓----</div>
      <nuxt-child></nuxt-child><!--（1）-->
    <div>----↑ここに子ページを表示↑----</div>
  </div>
</template>

　このサンプルを実行して「/Android/Samsung」と「/Android/SHARP」のパスに対応したページを表示させると、図7の通り、同じ親ページ内に異なる子ページが埋め込まれて表示されます。

ページ切り替え時のトランジション

　Nuxt.jsのルーティング機能では、ページ切り替え時にフェードやアニメーションなどのトランジションを設定できます。図9のサンプルで説明していきます。

図9：ページ切り替え時のトランジションを設定するサンプル（p004-transition）

　まず、トランジションを定義するCSSファイルをassetsフォルダーに配置します。

［リスト6］トランジションを定義するCSSファイル（p004-transition/assets/main.css）

.page-enter-active { /* 切り替え後のページのトランジション設定 ...（1）*/
  transition: 1s; /* 切り替え時間1秒 */
}
.page-leave-active { /* 切り替え前のページのトランジション設定 ...（2）*/
  transition: 0.5s; /* 切り替え時間0.5秒 */
}
.page-enter { /* 切り替え後ページのトランジション前スタイル ...（3）*/
  opacity: 0.5; /* 透明度0.5 */
  background-color: red; /* 赤 */
  transform: translateX(-100px); /* 左にずれた位置 */
}
.page-leave-to { /* 切り替え前のページのトランジション後スタイル ...（4）*/
  opacity: 0; /* 透明度0 */
  background-color: yellow; /* 黄色 */
  transform: translateY(100px); /* 下にずれた位置 */
}

　（1）と（2）は、切り替え前後のトランジション設定です。ここではtransitionプロパティで切り替え時間（切り替え前のページが0.5秒で消えて、切り替え後のページが1秒で表示される）を設定しています。

　（3）は切り替え後ページのトランジション開始時点のスタイルです。ここでは透明度0.5、背景が赤、左に100pxずれた位置からトランジションが開始されるように設定しています。

　（4）は、切り替え前ページのトランジション終了時点のスタイルです。ここでは、透明度0、背景が黄色、下に100pxずれた位置に移動した状態になってからページが消えるように設定しています。

　このように設定したCSSファイルは、Nuxt.jsの設定ファイルnuxt.config.jsに、リスト7の通り設定します。

［リスト7］CSSファイルを反映する設定（p004-transition/nuxt.config.js）

export default {
（略）
  css: [
    '~/assets/main.css'
  ],
（略）
}

　リスト6、7の設定を行うと、ページ切り替え時に設定されたトランジションが発生します。

　すべてのページに設定するトランジションとは別に、あるページにだけ個別にトランジションを設定することもできます。まず、CSSファイルにリスト8の通り追加します。

［リスト8］特定ページにだけ適用するトランジション定義（p004-transition/assets/main.css）

.apple-enter-active { /* 切り替え後のページのトランジション設定 */
  transition: 2s; /* 切り替え時間2秒 */
}
.apple-leave-active { /* 切り替え前のページのトランジション設定 */
  transition: 3s; /* 切り替え時間3秒 */
}
.apple-enter { /* 切り替え後ページのトランジション前スタイル */
  opacity: 0.25; /* 透明度0.25 */
  background-color: cyan; /* シアン */
  transform: translateY(-100px); /* 上にずれた位置 */
}
.apple-leave-to { /* 切り替え前のページのトランジション後スタイル */
  opacity: 0; /* 透明度0 */
  background-color: blue; /* 青 */
  transform: translateX(100px); /* 右にずれた位置 */
}

　基本的な記法はリスト6と同一ですが、CSSクラス名を「page」以外の任意の接頭辞（ここでは「apple」）で始めるようにします。

　個別にトランジションを設定するページでは、<script>のtransition属性に、CSSクラス名に設定した接頭辞を設定します。

［リスト9］ページに個別のトランジションを設定する記述（p004-transition/pages/Apple.vue）

export default {
  transition: 'apple'
}

　リスト8、9を設定すると、「/Apple」のページに遷移するときだけ、リスト8に設定した（他のページとは異なる）トランジションが行われるようになります。

まとめ

　本記事では、Nuxt.jsのルーティング機能について説明しました。Nuxt.jsでは、pagesフォルダー内のファイル配置がそのままルーティングのパスに反映されるため、直感的にページの切り替えを設定できます。また、トランジション機能を利用すると、よりリッチなページ切り替えを行うことができます。

　次回は、Webページで利用できる再利用可能な部品を作れるコンポーネントの機能について説明していきます。

参考資料

• Nuxt.js
• Vue.js