Nuxt.jsをはじめよう - クエリパラメータやパスパラメータを使ってデータを渡す
前回の記事 では画面遷移の仕方を紹介しました。 画面間でデータのを受け渡しをする方法を紹介します。Nuxt.js というか Vue.js の仕様も含まれています。
画面間でデータを渡す
画面間でデータの受け渡しをする方法はいくつかあります。URLのクエリパラメータで渡す方法やパスパラメータによる方法、またフレームワーク側でデータを保持する方法などです。Nuxt.js においてこれらのやり方をまとめてみました。
クエリパラメータを使う
URLのクエリパラメータとしてデータを取得したい場合には $route オブジェクトの query プロパティから取得ができます。
以下のように pageName=next というデータを nuxt-link から渡します。
1<nuxt-link to="/next?pageName=next" > Go to Next</nuxt-link>データを受け取る側では <template> ブロック内で $route.query.パラメータ名 によってデータを取得できます。
1<template>
2<div>
3 <div>
4 {{ $route.query.pageName }}
5 </div>
6</div>
7</template>また、 <script> ブロック内でクエリパラメータを取得したい場合には context オブジェクトから取得することも可能です。
1<script>
2export default {
3 asyncData (context) {
4 console.log(context.query.pageName)
5 },
6 fetch(context) {
7 console.log(context.query.pageName)
8 }
9}
10</script>パスパラメータを使う
次にURLのパスパラメータを使う方法です。Nuxt.js では pages ディレクトリ配下のファイルパスがそのままページのURLとして採用されます。
しかし、ファイル名やディレクトリ名を アンダースコアはじまりの名前で指定する と、動的なパラメータであると認識してくれるのです。
例えば、 pages ディレクトリ配下に _id/index.vue ファイルを作成します。
_id はアンダースコアはじまりなので、ここが動的なパスパラメータとなります。
./pages
└── _id
└── index.vue
_id/index.vue 内の <template> ブロックから参照するには $route.params.パラメータ名 で指定します。
1<template>
2 <div>
3 ID is {{ $route.params.id }}
4 </div>
5</template><script> ブロック内でクエリパラメータを取得したい場合には context オブジェクトから取得することも可能です。
1<script>
2export default {
3 asyncData (context) {
4 console.log(context.params.id)
5 },
6 fetch(context) {
7 console.log(context.params.id)
8 },
9}
10</script>