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

【问题标题】：How can I pass properties to a component which is called by router in Vue Js如何将属性传递给Vue Js中路由器调用的组件
【发布时间】：2018-02-20 03:43:47
【问题描述】：

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

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

 <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-view 在哪里？
它在 App.vue 中。

标签： javascript vue.js vuejs2 vue-component vue-router

【解决方案1】：

您可以将值作为query 对象传递：

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

并让表单组件检查$route.query 值，而不是使用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>

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

否则，我会看看this post。或者看看Vuex。

【讨论】：