Nuxt.js 入門 #2 – Nuxt.js と ルーティング

Nuxt.js を利用したWebアプリケーション開発の手法を紹介していきます。
第二回目は Nuxt.js の ルーティング機能の詳細を解説していきます。

Nuxt.js のルーティング機能

Nuxt.js は VueRouterを内蔵しており、
pages フォルダに配置された Vue コンポーネントは 自動的にルーティングに登録できます。

例えば /about で画面を表示したい場合、page/about.vue または page/about/index.vue にファイルを作成します。

page/about.vuepage/about/index.vue  がともに存在する際には、 page/about.vue が優先されます。

また、ルートに紐づくファイル探索は上からスタートされるため、 page/about/user.vue を作成しても
page/about.vue が存在する場合、 /about/userpage/about.vue が表示されます。

ルートのネスト

先に説明したようにpage/about.vue が存在する場合、 ルートに紐づくファイル探索は上からスタートされるため、
page/about/index.vue page/about/user.vue などを作成しても
/about /about/user ともにpage/about.vue が表示されます。

page/about.vue<template> 内で <nuxt/> タグを用いることで、サブビューを展開する事が出来ます。
<nuxt/> の内部は、/about の場合、 page/about/index.vue が、
/about/user の場合 page/about/user.vue が表示されます。

<template>
  <section class="container">
    <div>
      <app-logo/>
      <h1 class="title">About Page</h1>
      <h2 class="subtitle">
        this is about page
      </h2>
      <nuxt></nuxt>
      <footer class="links">
        <a href="" target="_blank">Documentation</a>
        <a href="" target="_blank">GitHub</a>
      </footer>
    </div>
  </section>
</template>

画面の遷移

ページ遷移には a ではなく router-link コンポーネントを利用します。

<template>
  <div>
    <h1 class="title">About this App</h1>

    <p>アプリケーションの紹介文がここに入ります。</p>

    <router-link to="/">トップページへ戻る</router-link>    
  </div>
</template>

router-link コンポーネントを利用することで、SPAアプリケーションのシームレスな画面遷移を実装する事ができます。
RouterLink コンポーネントの詳しい使い方は VueRouter の公式ドキュメントを確認してください。

https://router.vuejs.org/ja/api/router-link.html

プログラム上での画面遷移には $router.push が利用できます。

<template>
  <div>
    <h1 class="title">About this App</h1>

    <p>アプリケーションの紹介文がここに入ります。</p>

    <a @click="$router.push('/')">トップページへ戻る</a>    
  </div>
</template>

動的な URL の処理

動的なURLの処理には page コンポーネントのファイル名・フォルダ名に _ を付与します。

例えばpages/post/_id.vue/post/1 post/2 post/3 というURLでアクセスできます。

<template>
  <div>
    <h1 class="title">POST TITLE</h1>
    <p> ここに記事の本文が入ります。 </p>
  </div>
</template>

<script >
export default {
}
</script>

pages フォルダ内で 先頭に _ 付与したファイル名、フォルダ名の コンポーネントは、
セグメント内のあらゆる表現に対してマッチするようになります。

実際にアクセスされたURL内で使用されているURL上のパラメータは、
{{$router.params.id}}のようにして、$router オブジェクトから取得することが出来ます。

データバインディング

動的パラメータは、URLに記載されたあらゆる文字列とマッチしてしまいます。
例えば投稿のスラッグは 6文字 である、といった風にルートパラメータのバリデーションを行いたい場合、コンポーネント内でそれを定義することができます。

export default {
  validate ({ params }) {
    // 投稿のスラッグは 英字 6文字
    return /^[a-z]{6}$/.test(params.slug)
  }
}

この場合、 post/hogehoge などマッチしない文字列でアクセスした際には エラーページが表示されるようになります。

ルーティングしないページコンポーネント

pages 内に配置されたコンポーネントは通常ルーティングに割り当てられます。

_ を先頭に付けたページコンポーネントが動的なパラメータと解釈されるのに対して、
- を先頭に付けたページコンポーネントは、ルートとして認識されなくなる、というオプションも存在します。

ページコンポーネント内で参照したい、サブコンポーネントの配置などで利用すると良いでしょう。

ページ遷移のアニメーション

Nuxt.js におけるページ遷移では、デフォルトで page トランジションが定義されており、以下のようなCSSを記述する事でページ遷移時のアニメーションを定義できます。

.page-enter-active, .page-leave-active {
  transition: opacity .5s;
}
.page-enter, .page-leave-to {
  opacity: 0;
}

特定のページにカスタムのページ遷移アニメーションを作成したい場合、例えば次のような test トランジションをページコンポーネントに設定することが出来ます。

export default {
  transition: 'test'
}

記述するCSSは以下のようになるでしょう。

.test-enter-active, .test-leave-active {
  transition: opacity .5s;
}
.test-enter, .test-leave-active {
  opacity: 0;
}

レイアウト

ページコンポーネントが実際に描画されるデフォルトのレイアウトファイルは layouts/default.vue に用意されています。

特定のページにカスタムのレイアウトを適用したい場合、例えば次のような mypage レイアウトをページコンポーネントに設定することが出来ます。

export default {
  layout: 'mypage'
}

この場合、ページコンポーネントは、layouts/mypage.vue を用いて描画されるようになります。
カスタムで定義するレイアウトコンポーネントの中では、ページコンポーネントを描画するために <nuxt/> の記述を忘れないようにしましょう。

より大枠の HTML 構造をカスタマイズしたい場合には プロジェクトルートに app.htmlを配置します。
デフォルトの app.html は以下のような構造になっており、この構造を維持しながら、例えば任意のタグを追加したりなど行うことが出来るようになっています。

<!DOCTYPE html>
<html {{ HTML_ATTRS }}>
  <head>
    {{ HEAD }}
  </head>
  <body {{ BODY_ATTRS }}>
    {{ APP }}
  </body>
</html>

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です