[$route.params][layouts]2019年7月12日JavaScriptVue.jsの基本を知っている方向けに、Nuxt.jsフレームワークの概要を説明してみます。本記事では、「ページの作成」および「パラメーター機能」、そして「コンポーネント」「layoutsによるカスタムレイアウト」について説明していきます。RouterとVuex入門インストール公式ページに基づいてnpxでインストールします。「create-nuxt-app」という公式が用意しているテンプレートプロジェクトを利用し、今回は「nuxt-project」というプロジェクト(ディレクトリ名)を作成します。nuxt-projectプロジェクト生成の内容について本記事では下記のように選択しました。tools」は、何も選択していない状態です。完了すると下記のように表示されます。start生成されたディレクトリに入り、起動させます。生成された内容を確認してみます。storeこのディレクトリ構造については公式サイトがどこよりも詳しいですが、実際に実装して感触を得たら再度確認してみると良いでしょう。上記でマーカーが付いている部分は、本記事で説明する部分です。store(16行目)については下記ページをご覧下さい。[vuex-persistedstate][js-cookie]ページの作成ページの作成は、「pages」ディレクトリ内にファイルを追加するだけで可能です。自動でルーティングされる仕組みとなっています。pages内には既にindex.vueファイルが存在していますが、ここにabout.vueファイルと、更に「books」ディレクトリを作成してその中にindex.vueファイルを作成してみて下さい。下記構成であることを確認。index.vueそれぞれのファイルには下記のように記述しました。</template>12345<template><div><h1>booksページ</h1></div></template>以上で下記URLにおいて、各ページが確認できます。http://localhost:3000/abouthttp://localhost:3000/booksパラメーターについてURLのパラメーター情報を取得することができます。books/で画面を確認しました。今度は、同じくbooksディレクトリ内に「_id.vue」という名前のファイルを追加し、下記のように記述して下さい。取得することができます。このようにアンダースコアのプレフィックス(接頭辞)を付与することによって、そのパラメーターを取得できるようになります。ファイルだけではなくディレクトリ名にもプレフィックスを付与しパラメーターを取得することができます。booksディレクトリ内に更に「_pass」ディレクトリを作成し、次のような構造にして下さい。passおよびidのパラメーターを取得することができます。this.$route.params.pass}}}</script>実際には受け取るパラメーターデータに対してバリデーションする必要がありますが、本記事では説明しません。公式の参照ページルーティングのパラメータのバリデーションコンポーネントについてページ自体の作成は「pages」ディレクトリにファイルを追加していきましたが、部品としてのコンポーネントを作成していくには、「components」ディレクトリにファイルを追加していきます。/>と記述することによって表示されているのが確認できます。class="title">nuxt-project</h1>〜省略このようにして、部品としてのコンポーネントを使いまわしていくことが可能となります。ページ単位、部品単位においてもそれぞれ<template>・<script>・<style>というように構成されていることからも分かるように、Vue.jsのコンポーネントによる構築ということがより深く認識できるでしょう。後はこれらコンポーネント間において、「store」ディレクトリにおけるVuex機能を利用し、Nuxt.jsではどのようにデータをやり取りするのかを学ぶ必要がありますが、本記事では説明しません。「layouts」ディレクトリには、ページのレイアウト構成としての「雛形」を決めるファイルを保存していきます。プロジェクト作成時には既に「default.vue」ファイルが存在し、下記のように記述されています。部分に組み込まれています。記述してみると、全画面に「追加」の文字が表示されるのが確認できます。/></div></template>具体的にカスタムレイアウトとしてのsample.vueファイルを追加し、作成したabout.vue画面に適用してみます。/></div></template>次に「ページの作成」において追加したabout.vueファイル(about画面)に、このsample.vueとしてのカスタムレイアウトを適用させてみます。12行目のみ追記しています。いう名前を指定することにより、カスタムレイアウトであるsample.vueが適用されます。about画面に「サンプルレイアウト」と表示されるのが確認できるはずです。layoutオプションに何も指定しない場合は、デフォルトで「default.vue」が適用されているということになります。