Nuxt.jsをはじめよう - クエリパラメータやパスパラメータを使ってデータを渡す

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>

参考にさせていただいたサイト