簡単!Nuxt.jsにおけるページの構成方法

Web

Nuxt.jsにおけるルーティング

Nuxt.jsにはページ構成用のディレクトリとして「pages」ディレクトリが用意されています。ここに配備されたVueファイルはページとしてみなされ、自動的にルーティングが作られます。

プロジェクトを作成した時点では、pagesディレクトリには「index.vue」が作成されています。これがコンテキストのルートパスのページとなります。つまり、開発サーバーを起動し、「localhost:3000」でアクセスして表示されるページとなります。

では試しにpagesディレクトリに「about.vue」を作成しましょう。次のようにページの違いが分かるようにしておくと良いでしょう。

<template>
  <div>
    <h1>About Page</h1>
  </div>
</template>

「localhost:3000/about」にアクセスすれば、そのページが表示されるはずです。

次に記事の一覧のページ(/posts)と記事作成のページ(/posts/create)を作りたいとします。このような場合、次のようにVueファイルを作成します。

/pages
 ├ /posts
 │  ├ index.vue
 │  └ create.vue
 ├ about.vue
 └ index.vue

作成したら「localhost:3000/posts」と「localhost:3000/posts/create」にアクセスしてみてください。

見てわかるように、Nuxt.jsではpagesディレクトリの構造がそのままコンテキストパスとして設定されます。

動的なルーティング

先程の例に記事参照ページを追加します。このページは記事のIDをクエリパラメーターとして「/posts/{id}」としてアクセスすることとします。これを実現するためには、postsディレクトリに「_id.vue」を追加します。

今回のようなクエリパラメーターによる動的なルーティングを実現したい場合は、Vueファイルの先頭にアンダーバー(_)を設定します。アンダーバー以降の文字がクエリパラメーターの名前として設定されます。

どのようにルーティングされているの?

Nuxt.jsのルーティングにはVue Routerが使用されています。Vue Routerについて知らないという方はこちらの記事を参考にしてください。

【Vue.js】vue-routerの基礎をサンプルを用いて解説
vue-routerを用いることでURLにより表示するコンポーネントを制御することができます。Vue.jsでシングルページアプリケーションの構築する場合には必須といっていいほど利用されています。そんなvue-routerをサンプルを元に解説していきます。

通常のVueアプリケーションで先程のルーティングを行うためには、次のような設定を自分で記述する必要があります。

routes: [
  {
    path: '/',
    component: Index
  },
  {
    path: '/about',
    component: About
  },
  {
    path: '/posts',
    component: Posts
  },
  {
    path: '/posts/create',
    component: PostsCreate
  },
  {
    path: '/posts/:id',
    component: PostsDetail
  }
]

Nuxt.jsではこの設定をpagesディレクトリの構造から自動で生成してくれます。

Routerインスタンス・ルートオブジェクト

NuxtはVue Routerを使用していることから、Routerインスタンス(this.$router)とルートオブジェクト(this.$route)を使用することができます。

詳しい内容は先程紹介した記事を参照していただければと思います。

例えばページ遷移する場合は、Routerインスタンスのpushメソッドを使用します。

this.$router.push('/about')

またクエリパラメーターを取得する場合は、ルートオブジェクトのparamsを参照します。

this.$route.params.id

レイアウト

Vue Routerでは、「router-view」にコンテキストパスによって設定したコンポーネントが展開されます。そのため必ずベースとなるVueファイルが必要になります。

<template>
  <div>
    <router-view />
  </div>
</template>

Nuxt.jsでは、そのベースとなるVueファイルはレイアウトとして用意されています。作成したプロジェクトのlayoutsディレクトリにある「default.vue」がそれにあたります。それではファイルの中を確認してみてください。

<template>
  <div>
    <nuxt />
  </div>
</template>

Vue Routerでは「router-view」にコンポーネントが展開されますが、Nuxt.jsでは「nuxt」に展開されます。

レイアウトの基本的な役割は、下図のようにヘッダーやサイドメニューのような共通的な部分を定義し、可変的な部分をページとして表示させることです。

レイアウトの使い分け

すべてのページが上のようにヘッダーやサイドメニューが必要とは限りません。別のレイアウトが必要な場合は、ページコンポーネントのlayoutプロパティで使用するレイアウトのファイル名を指定します。

export default {
  layout: 'login',
}

この場合は「login.vue」というレイアウトを使用することになります。layoutプロパティを指定しなかった場合は「default.vue」が適用されます。

ページリンク

Vue Routerでは「router-link」を用いることでページリンクを作成することができました。

<router-link to="/about">ABOUT</router-link>

Nuxt.jsの場合は「nuxt-link」を使用します。

<nuxt-link to="/about">ABOUT</nuxt-link>

基本的な使い方などは同じなのでここでは割愛します。

ページプロパティ・メソッド

ページコンポーネントにはページ専用のプロパティやメソッドを使用することができます。ここでは一部のみを簡単に紹介します。詳しい内容についてはまた別記事で紹介できそうならします。

asyncDataメソッド

コンポーネントの展開前に外部からデータを取得するために使用します。取得したデータは通常のdataプロパティとして扱うことができます。

fetchメソッド

asyncDataメソッドと同じくコンポーネントの展開前に外部からデータを取得するために使用します。asyncDataメソッドとの違いは、取得したデータを自身のdataプロパティとしてではなく、ストアのデータとして設定します。

headメソッド

ページごとにheadタグの内容(titleやmeta)を変えたい場合に使用します。

layoutプロパティ

layoutプロパティは先程説明したように、使用したいレイアウトを指定します。

loadingプロパティ

ページのローディングアニメーションを表示するかを真偽値(true/false)で設定します。

scrollToTopプロパティ

ページ遷移した場合にページのトップまでスクロールします。

 

- Nuxt.jsのおすすめ書籍はコチラ -

コメント

タイトルとURLをコピーしました