为什么在Vue中使用RouterView无法实现父子组件数据传递？

你的代码存在两个核心问题导致SelectionPage接收不到数据：

1. 异步操作与路由跳转顺序错误：Home组件中，<RouterLink>会立即触发路由跳转，而submit是异步请求，跳转发生时$emit可能还未执行完成，App组件还没来得及接收并存储数据。
2. RouterView传递props的方式错误：直接在<RouterView>上绑定:data="data"无法将属性传递给路由匹配的组件，因为RouterView是路由视图容器，不支持这种直接传递props的方式。

步骤1：修正路由跳转时机，确保异步请求完成后再跳转 #

修改Home.vue，移除<RouterLink>，在submit方法成功获取响应并emit数据后，手动调用路由跳转：

<template>
  <button type="submit" @click="submit" style="margin-top: 1rem;"> Enter</button>
</template>

<script>
export default {
  name: 'Home',
  data() {
    return {
      fullInfo: {
        name: '',
        gender: '',
        birthdate: '',
        birthTime: '',
        place: ''
      },
      table: null
    }
  },
  methods: {
    async submit() {
      try {
        let response = await axios.post('/api/selectOne', {
          info: this.fullInfo,
        });
        let tableData = response.data;
        this.table = tableData;
        console.log(this.table);
        this.$emit('recieveData', tableData);
        // 异步请求完成后再跳转
        this.$router.push('/selectOne');
      } catch (err) {
        console.error('请求失败:', err);
      }
    }
  }
}
</script>

步骤2：使用Provide/Inject实现跨组件数据传递 #

由于SelectionPage是路由组件，通过App组件作为中间层传递数据，最合适的方式是用Vue的provide/inject特性：

修改App.vue，添加provide选项提供数据：

<template> 
  <RouterView @recieveData="dataRecieved($event)"></RouterView>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      data: {},
    }
  },
  // 提供数据给子组件
  provide() {
    return {
      appData: this.data
    }
  },
  methods: {
    dataRecieved(e) {
      console.log(e);
      this.data = e;
    }
  }
}
</script>

修改SelectionPage.vue，使用inject接收数据：

<template>
  <div>
    <h1> hello {{ appData }}</h1>
  </div>
</template>

<script>
export default {
  name: 'SelectionPage',
  inject: ['appData']
}
</script>

可选方案：使用路由参数传递（适合简单数据） #

如果你的tableData是简单类型或可序列化的对象，也可以在跳转时通过路由query传递：

Home.vue的submit方法中修改跳转代码：

this.$router.push({
  path: '/selectOne',
  query: { data: JSON.stringify(tableData) }
});

修改main.js的路由配置，开启props接收query参数：

{
  path: '/selectOne',
  component: SelectionPage,
  props: route => ({ data: JSON.parse(route.query.data) })
}

SelectionPage.vue保持原props配置即可：

<script>
export default {
  name: 'SelectionPage',
  props: ['data']
}
</script>

• provide/inject适合跨层级的组件数据共享，尤其是路由组件这种没有直接父子关系的场景；
• 路由参数传递适合简单、可序列化的数据，复杂对象推荐用状态管理（如Pinia）或provide/inject；
• 异步操作一定要确保完成后再执行后续逻辑（如跳转），避免数据未就绪就切换页面。

内容的提问来源于stack exchange，提问作者Seeker