vue-routerを使って、propsを渡したい

Question

現在Vueの学習を行なっているものです。

呼び出し元(userSearch.vue)からvue-routerを使って呼び出し先のcomponentに対してpropsで値を受け渡ししたいのですが、うまく渡すことができません。

具体的なイメージとしては「検索する」と言うボタンを押した時に検索API(今回だったらgetSearchUsersの部分)が走るので、その取得した結果をvue-routerで呼び出し先のcomponentに渡したいです。

ご教示頂けますと幸いです。

---

userSearch.vue(呼び出し元)

検索結果がusersに入ります。

<router-link to="/user_show" :users="users">
  <v-btn @click.native="getSearchUsers" color="primary">検索する </v-btn>
</router-link>

userShow.vue（呼び出し先）

<template>
 {{ this.$props.users }}
</template>

・
・
・
props: {
  users: {
    type: Array
  }
},

route.js

import Vue from 'vue'
import Router from 'vue-router'
import userShow from '../components/userShow'
import userSearch from '../components/userSearch'

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/user_show',
      name: 'userShow',
      component: userShow,
    },
    {
      path: '/',
      name: 'userSearchForm',
      component: userSearch,
      props: true
    }
  ]
})

Answer 1

https://router.vuejs.org/ja/guide/essentials/passing-props.html

このあたりを参考にされるとよいと思います。

Comments

[ko-u]

ありがとうございます！