などの疑問や悩みを解決してまいります。
Vueでは親子コンポーネントでの値の受け渡しにprops
やemits
が使用されますが、兄弟コンポーネント間で値を受け渡したい場合、どのようにコードを書いたらいいか悩まれていませんか?
こちらはVue-Routerを使用することで解決ができます。
今回は、Vue-Routerを使用して遷移先のコンポーネントに値を渡す方法について解説したいと思います。
Vue-Routerのインストール
Vue-Routerのインストールが前提となります。まだインストールが済んでいない場合は下記記事を参考にインストールをお願いします。
-
【Vue.js】Vue-RouterのインストールからSPAの実装までわかりやすく解説します。
続きを見る
実装例の紹介
まず先に遷移先のコンポーネントに値を渡す実装例をご紹介します。
<template>
<v-row>
<v-col
cols="12"
sm="6"
md="4"
v-for="cardData of cardDatas"
:key="cardData.id"
>
<!-- 遷移先コンポーネントに渡す値をqueryオブジェクトに設定する -->
<v-card
:to="{
name: 'detail',
query: {
imgUrl: cardData.cardImgUrl,
title: cardData.cardTitle,
text: cardData.cardText,
},
}"
>
<v-img :src="cardData.cardImgUrl" cover />
<v-card-title>{{ cardData.cardTitle }}</v-card-title>
<v-card-text>{{ cardData.cardText }}</v-card-text>
</v-card>
</v-col>
</v-row>
</template>
<script setup lang="ts">
// Detailコンポーネントに渡すデータの型
type CardDatas = CardData[];
type CardData = {
id: number;
cardImgUrl: string;
cardTitle: string;
cardText: string;
};
// Detailコンポーネントに渡すデータ
const cardDatas: CardDatas = [
{
id: 1,
cardImgUrl:
"https://mitsutano-oshiro.com/wp-content/uploads/2023/12/ttl-50.png",
cardTitle: "【Vue.js】Vue.jsの開発環境の構築方法について解説します。",
cardText:
"この記事ではVue.jsで開発するための環境構築の手順を初心者の方にもわかりやすく解説していきます。",
},
{
id: 2,
cardImgUrl:
"https://mitsutano-oshiro.com/wp-content/uploads/2024/05/ttl-45.png",
cardTitle: "【Vuetify3】Vuetifyの導入方法について解説します。",
cardText:
"Googleによって提唱されているマテリアルデザインを簡単に実装することができます。",
},
{
id: 3,
cardImgUrl:
"https://mitsutano-oshiro.com/wp-content/uploads/2024/02/ttl-38.png",
cardTitle: "【Vue.js】slotについて初心者にもわかりやすく解説します。",
cardText:
"slotとは親コンポーネントから子コンポーネントにコンテンツを挿入することができる機能です。",
},
];
</script>
import { createRouter, createWebHistory } from "vue-router";
import Detail from "@/components/views/Detail.vue";
import Home from "@/components/views/Home.vue";
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{
path: "/",
name: "home",
component: Home,
},
{
path: "/detail",
name: "detail",
component: Detail,
// 遷移先コンポーネントに渡す値を設定する
props: (route) => ({
imgUrl: String(route.query.imgUrl),
title: String(route.query.title),
text: String(route.query.text),
}),
},
],
});
export default router;
<template>
<v-img v-if="imgUrl" :src="imgUrl" />
<h1 class="mt-4" v-if="title">{{ title }}</h1>
<p class="my-4" v-if="text">{{ text }}</p>
<v-btn color="primary" :to="{ name: 'home' }">Homeに戻る</v-btn>
</template>
<script setup lang="ts">
// 遷移元から渡ってきた値を受け取る
defineProps<{ imgUrl: string; title: string; text: string }>();
</script>
Home.vueには3つのv-card
コンポーネントが表示されています。
v-card
コンポーネントをクリックすると詳細ページに遷移しますが、クリックしたv-card
コンポーネントの画像、タイトル、テキストの情報をVue-Routerで渡してあげて、渡された情報を詳細ページでも表示できるようにしています。
Vue-Routerの値の受け渡しにはクエリパラメータを使用しています。
コード解説
それではコードの解説に入ります。
Home.vue
まず遷移元のHome.vueでは、Vue-Routerで値を渡す準備を行います。
<!-- 遷移先コンポーネントに渡す値をqueryオブジェクトに設定する -->
<v-card
:to="{
name: 'detail',
query: {
imgUrl: cardData.cardImgUrl,
title: cardData.cardTitle,
text: cardData.cardText,
},
}"
>
:to="{name: 'detail'}
とすると、後ほど説明するrouter配下のindex.tsでルーティングの設定をすることでdetailページに遷移することができます。
この:to
の中でquery
オブジェクトを作成し、遷移先に渡す値を設定します。
遷移先の詳細ページでは画像とタイトル、テキストを表示させたいので、渡す値のキーをそれぞれ設定しています。
router/index.ts
router/index.tsではルーティングの設定と、遷移元から遷移先へ値を渡すための橋渡しをする設定を行います。
import { createRouter, createWebHistory } from "vue-router";
import Detail from "@/components/views/Detail.vue";
import Home from "@/components/views/Home.vue";
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{
path: "/",
name: "home",
component: Home,
},
{
path: "/detail",
name: "detail",
component: Detail,
// 遷移先コンポーネントに渡す値を設定する
props: (route) => ({
imgUrl: String(route.query.imgUrl),
title: String(route.query.title),
text: String(route.query.text),
}),
},
],
});
export default router;
遷移先へ値を渡すために、遷移先のルーティング設定のオブジェクト内に上記の記述方法でprops
を設定します。
props
のキーは遷移元で設定したキーをそのまま記述します。
imgUrl
、title
、text
でしたね。Detail.vue
最後に値を受け取る側のコンポーネントファイルの設定です。
<template>
<v-img v-if="imgUrl" :src="imgUrl" />
<h1 class="mt-4" v-if="title">{{ title }}</h1>
<p class="my-4" v-if="text">{{ text }}</p>
<v-btn color="primary" :to="{ name: 'home' }">Homeに戻る</v-btn>
</template>
<script setup lang="ts">
// 遷移元から渡ってきた値を受け取る
defineProps<{ imgUrl: string; title: string; text: string }>();
</script>
defineProps
で渡ってきた値を受け取るように記述します。
props
の記述については以下記事が参考になると思います。-
【Vue.js】親から子にデータの受け渡しができるpropsについて解説します。
続きを見る
このように遷移元のファイルの値を受け渡す設定、Vue-Routerで遷移元から遷移先への値の橋渡し、遷移先で値を受け取る設定を行う事で遷移先コンポーネントに値を渡すことが可能になります。
使用上の注意:実装例はあくまで値を渡す解説用
今回はVue-Routerで遷移先へ値を渡す方法の解説ということで、実装例のようなコードを書きましたが実際にこのような使い方はお勧めしません。
理由はクエリパラメータが長くなりすぎてしまうからです。
本来であればCardDatas
の各オブジェクトに含まれるid
を参照して、そのid
に紐づくデータをデータベースから取得して表示させるような方法などが好ましいです。
そのようにした場合は以下のようにクエリパラメータはid
の記述が追記されるだけなので冗長になりません。