Javascript 如何将属性传递给Vue Js中路由器调用的组件

我是VueJs新手，我对两个组件有问题。我试图用vuejs路由器显示一个组件，我必须向该组件传递属性，因为它不是该组件的子组件（它位于不同的目录中），我如何向该组件传递数据？ 例如：

这是一个父组件：

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

 <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>

导出默认值{
数据（）{
返回{
值：{val1:123，val2:321}
}
}
}

这是一个需要属性的组件，表单组件：

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

 <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>

导出默认值{
道具：{
价值观：{
类型：对象
}
}
}

您可以将值作为

查询对象传递：

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

请注意，这些值将作为查询字符串添加到URL中


否则，我会看一看。或者可以查看。
路由器视图在哪里？

？它在App.vue中。