Nuxt.js入門⑤サイトのページを追加していこう！

ページを追加するために必要な知識

前回はトップページを作成しましたが、それだけではサイトとは呼べないので今回ページを追加して、そのページへと移動できるようにしていきましょう！

ルーティング

ルーティングとはアクセスされたURLに対してのどのような操作をするのかを指定することを言います。

通常のフレームワーク(laravelや djangoなど)ではURLごとに毎回指定しないといけないのですが、Nuxt.jsはルーティングを自動で作成する機能を持っています。

前回ブログをイメージしてトップページを作成したので、記事の詳細ページを作成していきたいと思います！

コードはこちらになります。

<template>
  <div>
    <main role="main">
      <div class="jumbotron">
        <div class="container">
          <h1 class="display-3">Pllogg Blog</h1>
          <p>Nuxt.js | Pllogg</p>
          <p><a
            class="btn btn-primary btn-lg"
            href="#"
            role="button">Learn more &raquo;</a></p>
        </div>
      </div>
      <div class="container">
        <div class="row">
          <div class="col-12 my-3">
            <div class="card">
              <div class="card-body">
                <h4 class="card-title">テスト記事1</h4>
                <h6 class="card-subtitle mb-2 text-muted">テスト記事1</h6>
              </div>
            </div>
          </div>
          <div class="col-12 my-3">
            <div class="card">
              <div class="card-body">
                ブログ本文
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>
  </div>
</template>

このコードをpagesディレクトリの中にsingleというフォルダを作成し、その中にindex.vueとして保存します。

作成できたらサーバーを立ち上げてurlの末尾に
/singleと追加してアクセスしてみましょう！

先ほど作成した記事の詳細画面が表示されていますね！文章はWikipediaのゴリラの解説です（汗）

勘のいい方ならもうお気づきかもしれませんが、Nuxt.jsではファイル名と階層がそのままページのルーティング(URL)と直結します！

下にサンプルを用意してみました。

pages/
--| user/
-----| index.vue
-----| one.vue
--| index.vue

例えばこのような階層でページがあったとします。

その場合のルーティングは

パス	ページ	ネーム
/	pages/index.vue	index
/user	pages/user/index.vue	user
/user/one	pages/user/one.vue	user-one

このような感じになります。

とても便利ですよね！

index.vueはトップページと同様何も入力しないことでアクセスできます。

リンクの作成

ここまできたらページにリンクを作成していきましょう！

Nuxt.jsでは<nuxt-link>というタグで囲むことでリンクを作成することができます。

なぜこのようなリンクの作成の方法をとるのかと言うと、通常のaタグでリンクを作成した場合、サイト全体が再度読み込まれてSPAではなくなってしまうためです。

<nuxt-link>を使用することによって、ヘッダーやフッターは残されたままpagesディレクトリで指定している部分のみ更新されます。

リンクを作成するためには、toプロパティを使用して行き先のページを指定します。<a>タグで言う所のhrefのようなものです。

例えば先ほど作成した記事詳細ページへリンクするには

<nuxt-link to="/single">
  表示したい文字
</nuxt-link>

といった感じで記載します。

その他にもいろんな便利機能があるのでよく使うものをあげさせていただきます。

tag

<nuxt-link to=”/single” tag=”li”>
  表示したい文字
</nuxt-link>

結果
<li>
  表示したい文字
</li>

nuxt-linkを<li>など他のタグとして使用したいときにtagプロパティに使用したいタグを指定することでnuxt-linkはtagで指定したものに変換されます。他のタグを設定してもリンクとしての機能はしっかりと果たします。

append

<nuxt-link to=”/single” append>
  表示したい文字
</nuxt-link>

appendプロパティを設定することで現在のパスに対して相対パスとして追加します。
左の場合、通常であれば/singleに移動しますが、この場合現在が/aだった場合/a/singleとなります。

前回作成したページのトップページの記事一覧のタイトルを<nuxt-link>に変更してみましょう！

青い下線の部分です！

前回作成した記事タイトルのコードはこのようになっています。

<h4 class="card-title">
  テスト記事1
</h4>

このコードを<nuxt-link>にするにはこのように変更します。

<nuxt-link
  tag="h4"
  to="/single"
  class="card-title">
  テスト記事1
</nuxt-link>

このような感じになります。

先ほど紹介させていただいた、tagを使用してh4に変換し、toでリンク先を指定します。

通常通りclassタグも使用することができます。

動的ルートの作成

Nuxt.jsでは動的に変化するルートも簡単に作成することができます。

その方法はフォルダ、ファイル名の先頭に_(アンダーバー)を追加するだけです(笑)

_id.vueや_slugと言った感じです！

この場合のサンプルも下に記載しておきます。

pages/
--| _slug/
-----| comments.vue
-----| index.vue
--| users/
-----| _id.vue
--| index.vue

このような感じのページ構成なら

パス	ページ	ネーム
/	pages/index.vue	index
/users/:id?	pages/users/_id.vue	users-id
/:slug	pages/_slug/index.vue	slug
/:slug/comments	pages/_slug/comments.vue	slug-comments

このような感じとなります。

こうすることによって、今後apiなどにアクセスしてデータを取得してくる際に任意のデータを取得することが可能となります。

<nuxt-link>を動的ルートに適応させる

動的なルートを作成したらnuxt-linkもそれに対応しなければなりません。

対応方法としては、to= の中身を変更してあげます。

例として先ほどのサンプルであげさせていただいた users-idに対するリンクを作成する場合は下記のような感じです。

<nuxt-link :to="{ name: 'users-id', params: { userId: 123 }}">
  表示したい文字
</nuxt-link>

この場合URLは/users/123となります。

toの前に【 : 】をつけるのを忘れないようにしてください。

動的ルートに関して今回は紹介程度ですが、
次回からNuxt.jsを使って、WP REST API(WordPressのAPI)を使用した
SPAブログの作成を解説していきます。
その際にガッツリ動的ルートと取り扱いますので楽しみにしていてください！

あとがき

この容量でどんどんページを追加してみてください。
ここまで覚えてしまえば静的なサイトは作り放題です！

僕は数をこなすことが上達への一番の近道だと思っているので自分なりにどんどん挑戦してみてください！

目次へ戻る