How to pass the value of a variable to a component?

Question

Vue.js

There is this App.vue:

<div id="app">
  <input type="text" v-model="person" placeholder="Введите имя" @keyup.enter="onKeyUp">
  <router-view></router-view>
</div>

export default {
  name: 'app',
  data () {
    return {
      person: '',
      accountId: '',
      name: '',
      age: '',
      resourceUrl: '',
      resourceInfo: ''
    }
  },
  methods: {
    onKeyUp: function () {
      this.$Progress.start()

      let resourceUrl = 'ссылка на ПЕРВЫЙ json из api в котором есть имя и id'

      this.$http.get(resourceUrl).then(function (response) {
        this.name = response.data.name // берём имя из ПЕРВОГО файла json
        this.accountId = response.data.account_id // берём id из ПЕРВОГО файла json

        let accountId = this.accountId

        let resourceInfo = 'ссылка на ВТОРОЙ json из api в котором лежит информация, которую получаем по accountId' + accountId

        this.$http.get(resourceInfo).then(function (response) {
          this.age = response.data.age // забираем из ВТОРОГО json возраст
        })
      })
    }
  }
}

And there is a Hello component which is a route:

<div class="hello">
    <div v-if="name">
      <h1>Имя из ПЕРВОГО json: {{ name }}</h1>
      <h2>Возраст из ВТОРОГО json: {{ age }}</h2> 
    </div>
    <div v-else>
      <h1>Введите ваше имя</h1>
    </div>
  </div>

You need to make sure that when you enter the name of a person in the input, the request is sent to the database, then there is a transition to the Hello route and name and age are filled in it.
When I have the Hello route code in App.vue, everything works, but as soon as I leave this code in the Hello component, nothing works, most likely due to the fact that this route does not yet exist.
Please help me figure it out?

Answer 1

You need to add a route that will render the Hello component. And then go to this route after receiving the data by calling router.push.