Vue开发中如何通过路由参数向子组件传递更多数据值

共有三种常用实现方式，可根据你的场景选择： #

方案1：路由params直接携带全量数据（轻量场景用，不支持刷新页面） #

你已经开启了路由props: true配置，直接在跳转时把需要的字段塞到params里即可：

1. 修改Row组件的路由跳转逻辑：

<router-link
  :to="{ 
    name: 'Companies', 
    params: {
      id : row.Name,
      Location: row.Location,
      Founder: row.Founder,
      AmountRaised: row['Amount Raised'],
      // 其他需要传递的字段直接加在这里
    } 
  }"
>
  <b>{{row.Name}}</b><br>
  <!-- 其余原有代码 -->

2. 修改父组件Companies.vue，接收路由参数并传递给子组件：

<template>
  <v-container class="fill-height d-flex justify-center align-start" >
    <div>
      <h1> Companies main view </h1>
      <Company v-bind="$props"/>
      <router-link  to="/funds">Back</router-link>
   </div>
  </v-container>
</template>
<script>
import Company from '@/components/Company.vue'
export default  {
  name: "Companies",
  components: { Company },
  // 声明接收所有路由传递的参数
  props: ['id', 'Location', 'Founder', 'AmountRaised']
}
</script>

3. 修改Company子组件，直接通过props拿数据：

<template>
  <v-container class="fill-height d-flex justify-center align-start" >
    <h3> Company component: {{ id }}  </h3>
    <p>地址：{{ Location }}</p>
    <p>创始人：{{ Founder }}</p>
    <p>融资金额：{{ AmountRaised }}</p>
  </v-container>
</template>
<script>
export default {
  name: "Company",
  props: ['id', 'Location', 'Founder', 'AmountRaised']
}
</script>

注意：该方案刷新页面后，params里除了URL中存在的id之外的参数都会丢失，仅适合临时演示场景使用 #

方案2：本地缓存列表数据，详情页按ID匹配（不需要额外接口请求，兼容刷新） #

和Rails列表页加载完数据后详情页直接从本地缓存取数的逻辑一致：

1. Sheet组件拿到表格数据后，存入你已经接入的Vuex中：

async accessSpreadSheet() {
  const doc = new GoogleSpreadsheet(process.env.VUE_APP_API_KEY);
  await doc.useServiceAccountAuth(creds);
  await doc.loadInfo();
  const sheet = doc.sheetsByIndex[0];
  const rows = await sheet.getRows({ offset: 1 })
  this.rows = rows;
  // 存入Vuex
  this.$store.commit('saveCompanyList', rows)
  this.loading = false;
}

2. 在Vuex中新增对应存储逻辑：

// store/index.js
state: {
  companyList: []
},
mutations: {
  saveCompanyList(state, list) {
    state.companyList = list
  }
}

3. 修改Companies.vue，通过ID匹配对应公司的全量数据：

<template>
  <v-container class="fill-height d-flex justify-center align-start" >
    <div>
      <h1> Companies main view </h1>
      <Company :company="companyInfo"/>
      <router-link to="/funds">Back</router-link>
   </div>
  </v-container>
</template>
<script>
import Company from '@/components/Company.vue'
export default  {
  name: "Companies",
  components: { Company },
  props: ['id'],
  computed: {
    companyInfo() {
      return this.$store.state.companyList.find(item => item.Name === this.id) || {}
    }
  }
}
</script>

4. Company子组件直接接收完整公司对象即可调用所有字段：

<template>
  <v-container class="fill-height d-flex justify-center align-start" >
    <h3>公司名称：{{ company.Name }}</h3>
    <p>地址：{{ company.Location }}</p>
    <p>融资日期：{{ company['Funding Date'] }}</p>
    <p>融资金额：{{ company['Amount Raised'] }}</p>
    <p>总融资额：{{ company['Total Raised'] }}</p>
    <!-- 其余字段直接取company对应属性即可 -->
  </v-container>
</template>
<script>
export default {
  name: "Company",
  props: {
    company: {
      type: Object,
      default: () => ({})
    }
  }
}
</script>

方案3：详情页单独请求数据（生产环境推荐，完全匹配Rails CRUD逻辑） #

和Rails详情页根据ID单独查询数据库的逻辑完全一致，数据永远最新，刷新页面无影响：
直接修改Companies.vue，页面加载时根据传入的id单独查询对应公司的数据：

<script>
import Company from '@/components/Company.vue'
import GoogleSpreadsheet from 'google-spreadsheet'
// 引入你的授权凭证文件
const creds = require('你的凭证文件路径')
export default  {
  name: "Companies",
  components: { Company },
  props: ['id'],
  data() {
    return {
      companyInfo: {}
    }
  },
  async created() {
    const doc = new GoogleSpreadsheet(process.env.VUE_APP_API_KEY);
    await doc.useServiceAccountAuth(creds);
    await doc.loadInfo();
    const sheet = doc.sheetsByIndex[0];
    const rows = await sheet.getRows({ offset: 1 })
    this.companyInfo = rows.find(item => item.Name === this.id) || {}
  }
}
</script>

Company子组件的代码和方案2完全一致即可。

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