如何从 vue 中的路由参数在子组件中传递更多数据值？

Question

所以我很糟糕，真的很不擅长提问，所以我决定制作一个视频，这样我就可以自己解释我想问的问题，简而言之，我可以说我想从一个组件中获得更多可用的数据一个子组件，就像我们在视图 post 页面的 Rails CRUD 应用程序上的 Ruby 上所做的那样。

这是视频，请看视频，废话 --> https://youtu.be/026x-UvzsWU

代码：

行子组件：

<template>
    <tr>
        <td class="name-logo-col">
            <!-- dynamic routes for data -->
        <router-link
        :to="{ name: 'Companies', params: {id : row.Name} }">
        <b>{{row.Name}}</b><br> ...

Sheet分量：

<template>
<div class="container-fluid">
        <div class="row">
            <main role="main" class="col-md-12 ml-sm-auto col-lg-12 pt-3 px-4">
                <div class=" pb-2 ma-3 ">
                    <h2 class="center">Funding</h2>
                    <v-divider></v-divider>
                </div>
                <div class="mb-5 table-responsive">
                <!-- <v-data-table
                    :headers="headers"
                    :items="rows"
                    class="elevation-1">
                </v-data-table> -->
                <table class="table table-striped ">
                    <thead>
                    <tr>
                        <th>Name</th>
                        <th>Funding Date</th>
                        <th>Amount Raised</th>
                        <th>Round</th>
                        <th>Total Raised</th>
                        <th>Founder</th>
                        <th>Est.</th>
                        <th>Location</th>
                        <th>Lead Investor</th>
                    </tr>
                    </thead>
                    <tbody >
                        <Row v-bind:key="row.id" v-for="row in rows" v-bind:row="row" />
                    </tbody>...
                       
                     //data 

                                    rows: [],
            loading: true,
        }
    },
    methods:{
        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;
            this.loading = false;
        }
    },
    created() {
        this.accessSpreadSheet();
        // testing console.log(process.env.VUE_APP_API_KEY)
    }

这是我查看公司动态路由器子组件的地方：

     <template>
  <v-container class="fill-height d-flex justify-center align-start" >
    <h3> Company component: {{ $route.params.id }}  </h3>
    <p> {{$route.params.Location}}  </p>
  </v-container>
</template>

<script>
export default {
  name: "Company",
  data() {
    return {
    }
  }
}
</script>

这是子公司的父组件公司：

<template>
  <v-container class="fill-height d-flex justify-center align-start" >
    <div>
      <h1> Companies man view </h1>
      <Company/>
      <router-link  to="/funds">
        Back
      </router-link>
   </div>
  </v-container>
</template>

<script>
import Company from '@/components/Company.vue'

export default  {
  name: "Companies",
  components: {
    Company
  },

}
</script>

这是我的路由器link索引页面相关代码：

{
    path: '/companies/:id',
    name: 'Companies',
    props: true,
  component: () => import(/* webpackChunkName: "add" */ '../views/Companies.vue')
  }
]


const router = new VueRouter({
  mode: 'history',
  routes,
  store
})

Answer 1

所以我看了视频，我认为你从错误的角度来处理这个问题。

您似乎不熟悉 Vuex，您可能会假设您通过 $route 传递所有数据，这不是它的用途。

所以这将是理想的流程：

您从 API
数据存储在 Vuex 存储中
用户导航到页面
Param.id 从 $route
Id 作为 getter
Getter returns 数据到按 id
数据在组件中使用

这样做可以使您的所有数据集中并可在任何组件中重复使用。您甚至可以通过转到 Chrome 工具并单击 Vuex 选项卡来实时查看 Vuex 商店中的内容。

如果您还有其他问题，请告诉我！

Answer 2

我不太确定我是否理解了整个问题，但我会尝试回答我理解的部分。
如果您想传递行内的其他元素而不仅仅是名称或位置以使用名称“Companies”进行路由，那么您的第一个代码实际上只需要稍作更改。你只需要传递整行并且不要忘记将它解析成一个字符串，所以数据将在重新加载后保留。

<router-link
    :to="{ name: 'Companies', params: {id : JSON.stringify(row)} }">

然后使用 JSON.parse($route.params.id).

将其解析回 Companies 组件内的 JSON

或

您可以使用多个参数，因此不要将路由器索引中的参数命名为 path: '/companies/:id，而应将其命名为 path: '/companies/:Name/:Location'，然后传递其他参数的数据。

<router-link
    :to="{ name: 'Companies', params: { Name: row.Name, Location: row.Location } }">

但是所有参数都是必须的，所以你每次都必须给所有参数传递值。

或

比起params，你可以用query，更灵活。您可以在不修改路由器索引内路径的情况下传递任何其他查询。

<router-link
    :to="{ name: 'Companies', query: { Name: row.Name,Location: row.Location } }">

并从您的路由器索引中删除 /:id，因此它只是 path: '/companies'、

之后，您可以使用 $route.query.Name

直接访问 Companies 组件内的查询值

如何从 vue 中的路由参数在子组件中传递更多数据值？

How can i pass in more data values inside a child component from my route parameter in vue?

frontend

routes

dynamic-programming

vue.js