【Vue.js】Vue-Routerを使用して遷移先に値を渡す方法について解説します。

Vue.js Vuetify Web制作

【Vue.js】Vue-Routerを使用して遷移先に値を渡す方法について解説します。

なやむくん
兄弟コンポーネント間で値を渡しを行いたい…。
なやむさん
遷移先のコンポーネントに値を渡したい…。

などの疑問や悩みを解決してまいります。

Vueでは親子コンポーネントでの値の受け渡しにpropsemitsが使用されますが、兄弟コンポーネント間で値を受け渡したい場合、どのようにコードを書いたらいいか悩まれていませんか?

こちらはVue-Routerを使用することで解決ができます。

今回は、Vue-Routerを使用して遷移先のコンポーネントに値を渡す方法について解説したいと思います。

みつた
実装例にはVuetifyを利用しています。Vuetifyに関わらず実装方法は変わりませんのご安心ください。

Vue-Routerのインストール

Vue-Routerのインストールが前提となります。まだインストールが済んでいない場合は下記記事を参考にインストールをお願いします。

参考記事
【Vue.js】Vue-Routerのインストールから使い方についてわかりやすく解説します。
【Vue.js】Vue-RouterのインストールからSPAの実装までわかりやすく解説します。

続きを見る

実装例の紹介

まず先に遷移先のコンポーネントに値を渡す実装例をご紹介します。

よろこびくん
画像とタイトル、テキストが遷移先のコンポーネントでも表示ができていますね!
みつた
Vue-Routerを使用して値を遷移先コンポーネントに渡しています!以下がコード内容です。
<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のキーは遷移元で設定したキーをそのまま記述します。

みつた
遷移元で設定したキーはimgUrltitletextでしたね。

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の記述については以下記事が参考になると思います。
参考記事
【Vue3】親から子にデータの受け渡しができるpropsについて解説します。
【Vue.js】親から子にデータの受け渡しができるpropsについて解説します。

続きを見る

このように遷移元のファイルの値を受け渡す設定、Vue-Routerで遷移元から遷移先への値の橋渡し、遷移先で値を受け取る設定を行う事で遷移先コンポーネントに値を渡すことが可能になります。

よろこびくん
ファイルごとに値を渡すための各役割があり、その内容がどのようなものか分かりました!

使用上の注意:実装例はあくまで値を渡す解説用

今回はVue-Routerで遷移先へ値を渡す方法の解説ということで、実装例のようなコードを書きましたが実際にこのような使い方はお勧めしません。

理由はクエリパラメータが長くなりすぎてしまうからです。

みつた
特に文字数が多くなるテキストをクエリパラメータとして渡す場合は注意で、各ブラウザによってURLの文字数制限があります。

本来であればCardDatasの各オブジェクトに含まれるidを参照して、そのidに紐づくデータをデータベースから取得して表示させるような方法などが好ましいです。

そのようにした場合は以下のようにクエリパラメータはidの記述が追記されるだけなので冗長になりません。

みつた
クエリパラメータが長くなることが悪というわけではありません。プロジェクトの仕様や条件によってはクエリパラメータが長くなることも想定されます。
  • この記事を書いた人
  • 最新記事

みつた

完全未経験&異業種から30歳の年でIT企業に転職。

Web系開発言語が好き。
どちらかというとバックエンドよりもフロントエンドが好き(現時点では…)

最近はサウナと観葉植物にハマっている。
野球が好きで一応投手。

-Vue.js, Vuetify, Web制作