javascript - How can I pass properties to a component which is called by router in Vue Js -

i new vuejs , have problem 2 components. trying display component vuejs router , must pass properties component , since it's not child of component (it's in different directory), how can pass data component? example:

this parent component:

 <template>     <div class="container">        <router-link to="/form"></router-link>     </div> </template>  <script>   export default{   data(){     return{       values: {val1: 123, val2: 321}     }   } } </script> 

this components needs properties, form component:

 <template>     <div class="container">        <form>          <input type="text" v-model="values.val1"/>          <input type="number" v-model="values.val2"/>        </form>     </div> </template>  <script>   export default{   props: {     values: {       type: object     }   } } </script> 

you pass values query object:

<router-link :to="{ path: '/form', query: values }"></router-link> 

and have form component check $route.query values instead of using props:

<template>   <div class="container">     <form>       <input type="text" v-model="values.val1"/>       <input type="number" v-model="values.val2"/>     </form>   </div> </template>  <script> export default {   data() {     return {       values: this.$route.query     }   }         } </script> 

note these values added url query string.

---

otherwise, i'd take @ this post. or maybe vuex.