Nuxt.js入門 [$route.params][layouts]

2019年7月12日

Vue.jsの基本を知っている方向けに、Nuxt.jsフレームワークの概要を説明してみます。

 

本記事では、「ページの作成」および「パラメーター機能」、そして「コンポーネント」「layoutsによるカスタムレイアウト」について説明していきます。

 

Nuxt.js のバージョン

v2.8.1

 

Nuxt.jsを利用しない場合はこちら

Vue CLI 3 ではじめるVue RouterとVuex入門

 

 

インストール


 

公式ページに基づいてnpxでインストールします。「create-nuxt-app」という公式が用意しているテンプレートプロジェクトを利用し、今回は「nuxt-project」というプロジェクト(ディレクトリ名)を作成します。

 

プロジェクト生成の内容について本記事では下記のように選択しました。

「Choose Nuxt.js modules」及び「Choose linting tools」は、何も選択していない状態です。

 

完了すると下記のように表示されます。

 

生成されたディレクトリに入り、起動させます。

 

http://localhost:3000/

 

 

 

プロジェクト概要


 

生成された内容を確認してみます。

このディレクトリ構造については公式サイトがどこよりも詳しいですが、実際に実装して感触を得たら再度確認してみると良いでしょう。なお上記でマーカーが付いている部分は、本記事で説明する部分です。

 

store(16行目)については下記ページをご覧下さい。

Nuxt.jsのStoreによるデータ保存 [vuex-persistedstate][js-cookie]

 

 

ページの作成


 

ページの作成は、「pages」ディレクトリ内にファイルを追加するだけで可能です。つまり自動でルーティングされる仕組みとなっています。

 

pages内には既にindex.vueファイルが存在していますが、ここにabout.vueファイルと、更に「books」ディレクトリを作成してその中にindex.vueファイルを作成してみて下さい。

 

下記構成であることを確認。

 

それぞれのファイルには下記のように記述しました。

 

pages/about.vue

 

pages/books/index.vue

 

以上で下記URLにおいて、各ページが確認できます。

 

http://localhost:3000/about

http://localhost:3000/books

 

 

パラメーターについて


 

URLのパラメーター情報を取得することができます。

 

上述ではページの作成としてbooks/index.vueファイルを追加し、URLである books/で画面を確認しました。今度は、同じくbooksディレクトリ内に「_id.vue」という名前のファイルを追加し、下記のように記述して下さい。

 

pages/books/_id.vue

12 行目

例えば http://localhost:3000/books/123 にアクセスすると、「123」の文字列をパラメーターとして

this.$route.params で取得することができます。
 
 
このようにアンダースコアのプレフィックス(接頭辞)を付与することによって、そのパラメーターを取得できるようになります。ファイルだけではなくディレクトリ名にもプレフィックスを付与しパラメーターを取得することができます。
 
 
booksディレクトリ内に更に「_pass」ディレクトリを作成し、次のような構造にして下さい。

 

_id.vue ファイルを下記のように編集すれば、http://localhost:3000/books/aiueo/123 でpassおよびidのパラメーターを取得することができます。

 

pages/books/_pass/_id.vue

 

実際には受け取るパラメーターデータに対してバリデーションする必要がありますが、本記事では説明しません。

 

公式の参照ページ

ルーティングのパラメータのバリデーション

 

 

コンポーネントについて


 

ページ自体の作成は「pages」ディレクトリにファイルを追加していきましたが、部品としてのコンポーネントを作成していくには、「components」ディレクトリにファイルを追加していきます。

 

すでにLogo.vueファイルが存在していますが、実際にこのコンポーネントは「pages/index.vue」のテンプレート内にて<logo />と記述することによって表示されているのが確認できます。

 

このようにして、部品としてのコンポーネントを使いまわしていくことが可能となります。ページ単位、部品単位においてもそれぞれ<template>・<script>・<style>というように構成されていることからも分かるように、Vue.jsのコンポーネントによる構築ということがより深く認識できるでしょう。

 

後はこれらコンポーネント間において、「store」ディレクトリにおけるVuex機能を利用し、Nuxt.jsではどのようにデータをやり取りするのかを学ぶ必要がありますが、本記事では説明しません。

 

関連ページ

Vue.jsのコンポーネント入門[props][$emit]

 

 

layoutsによるカスタムレイアウト機能


 

「layouts」ディレクトリには、ページのレイアウト構成としての「雛形」を決めるファイルを保存していきます。

 

プロジェクト作成時には既に「default.vue」ファイルが存在し、下記のように記述されています。

ページ単位としてのindex.vueや、追加したabout.vueなどのコンポーネントはすべて <nuxt /> 部分に組み込まれています。仮に下記のように <p>追加</p> を記述してみると、全画面に「追加」の文字が表示されるのが確認できます。

 

具体的にカスタムレイアウトとしてのsample.vueファイルを追加し、作成したabout.vue画面に適用してみます。

 

layouts/sample.vue

 

次に「ページの作成」において追加したabout.vueファイル(about画面)に、このsample.vueとしてのカスタムレイアウトを適用させてみます。12行目のみ追記しています。

 

pages/about.vue

12行目

layoutオプションに sample という名前を指定することにより、カスタムレイアウトであるsample.vueが適用されます。about画面に「サンプルレイアウト」と表示されるのが確認できるはずです。

 

つまりlayoutオプションに何も指定しない場合は、デフォルトで「default.vue」が適用されているということになります。

 

公式の参照ページ

カスタムレイアウト

 

 

参照ページ


 

NUXT JS

 

 

 

LINEで送る
Pocket

Copyright © 2019 思考の葉 All Rights Reserved.  プライバシーポリシー