Nuxt.js で始める Webサイト制作

SPA のページ遷移

router-link を利用して SPA 形式のページ遷移を行う方法を確認しましょう。

Nuxt.jsはSPAと呼ばれる技術を利用したサイト制作を行うためのツールです。

SPAでは、画面の差分を利用して、サイト内のページ遷移をより高速に行うことができるようになっており、 Nuxt.jsでもこの技術を簡単に活用することが出来ます。

# Nuxt.jsにおけるページ遷移

Nuxt.jsにおけるサイト最作では、サイト内のページ遷移のリンクは、 a要素よりも router-link 要素を用いて記述されます。

layout/default.vue に記述したヘッダの要素は、 router-link 要素を用いて、以下のように記述することが出来ます。

<template>
  <div>
    <nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">
      <div class="container">
        ...
        <div class="collapse navbar-collapse" id="navbarResponsive">
          <ul class="navbar-nav ml-auto">
            <li class="nav-item">
              <router-link class="nav-link" to="/">Home</router-link>
            </li>
            <li class="nav-item">
              <router-link class="nav-link" to="/about">About</router-link>
            </li>
            <li class="nav-item">
              <router-link class="nav-link" to="/post">Sample Post</router-link>
            </li>
          </ul>
        </div>
      </div>
    </nav>
    ...
  </div>
</template>

<script>
  export default {
  }
</script>

<style>
  ...
</style>

router-link はNuxt.jsで利用されている VueRouter というライブラリで用意されている 専用のコンポーネントタグです。

router-link でリンクを記述する場合、遷移先はhref ではなく to 属性で記述します。

通常のa要素でのページ遷移が、ページ全体の再読み込みとなるのに対し、 router-link を利用したページ遷移では、画面の差分のみが読み込まれ、 ヘッダやフッタなどの共通要素は、そのままの形でページ内に維持されます。

検証ツールで確認するとわかるように、router-linkで記述した要素は、 最終的にはa要素に変換されるため、 Bootstrap等のCSSフレームワークを利用する際にも、 通常のa要素と同じように扱うことが可能です。

TIP

Nuxt.jsでは、router-link の他に nuxt-link 要素を用いてサイト内リンクを記述することも可能ですが、 nuxt-link 要素の使い方は router-link 要素とほとんど同じです。

# router-link要素の活用

Nuxt.jsで作成したプロジェクトにおいて、router-link 要素で記述したリンク要素には、 現在のURLの状況に合わせて、nuxt-link-exact-active や nuxt-link-active のようなクラス名が付与されます。

  • nuxt-link-exact-active : 現在のURLとリンク先のURLが完全に一致する場合
  • nuxt-link-active : 現在のURLがリンク先のURLに先頭一致する場合

このクラスを利用して

  a.nuxt-link-exact-active{
    font-weight: bold;
  }

TIP

Nuxt.js では router-link の他に nuxt-link 要素を利用するケースもありますが、 どちらも基本的な利用方法は同じもので機能に大きな違いはありません。

# Check!

次のステップに進む前に以下の内容をもう一度確認しておきましょう。

  • router-link 要素を用いたリンクの記述方法について確認しておきましょう。
  • router-link 要素を利用した際に付与される nuxt-link-exact-active nuxt-link-active クラスの使い方について確認しておきましょう。

← CSS/SCSS の利用 →