【Vue.js】ルーティング時に遷移先のコンポーネントにprops経由で値を渡す

Naoki Machida

Vue.jsでルーティング(this.$router.push())する際に、遷移先のコンポーネントにprops経由でデータを渡す方法を説明します。

Keywords

  • Vue.js

Contents

  • 1. ルーティング
  • 2. ルーティング処理の記述
  • 3. ListComp

ルーティング

ルートに名前をつけます。ここではListという名前をつけています。また、propsを有効にしています。

{   
  path: "/list",
  component: ListComp,
  name: "List",
  props: true
},

ルーティング処理の記述

先程つけた名前のルートに遷移する処理です。{message: "テスト"}を指定しています。

this.$router.push({name: 'List', params: {message: "テスト"}})

ListComp

messageというpropsを受け取れるようにしています。このコンポーネントを直接開いた場合は、v-ifはfalseになり、何も表示されませんが、上記のようにthis.$router.push({name: 'List', params: {message: "テスト"}})のように遷移してきた場合は、messageに指定した文字列が表示されます。ここでは「テスト」と表示されます。

<template>
  <div>
    <div v-if="message != undefined">{{message}}</div>

  </div>
</template>

<script>
  export default {
    props: ['message'],
    data() {
      return {
    
      }
    }
  }
</script>

<style lang="scss">

</style>