我如何在一个子组件内传递更多的数据值从我的路由参数在vue?

所以我很糟糕，真的不擅长问问题，所以我决定做一个视频，这样我就可以解释我想问什么，简而言之，我可以说我想从一个组件到一个子组件有更多的数据可用，就像我们在一个Ruby on Rails CRUD应用程序的视图post页面。

这是视频，请观看视频并抛弃我的话——>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> ...

表组件:

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

这是我的路由器连接索引页相关代码:

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

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

我不太确定我是否理解了整个问题，但我会尽量回答我理解的部分。
如果您希望将行内的其他元素传递给路由，而不仅仅是Name或Location，那么您的第一个代码实际上只需要稍微更改一下。您只需要传递整个行，并且不要忘记将其解析为字符串，以便在重新加载后数据将保留。

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

，然后在Companies组件中使用JSON.parse($route.params.id)将其解析回JSON。

或

你可以使用多个参数，所以不要把路由器索引中的参数命名为path: '/companies/:id，你应该把它命名为path: '/companies/:Name/:Location'，然后你传递其他参数的数据。

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

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

或

可以使用query而不是params，这样更灵活。你可以传递任何额外的查询，而无需修改router index中的路径。

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

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

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

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

我看了视频，我觉得你从错误的角度来看待这个问题。

似乎你不熟悉Vuex，你可能会认为你通过$route传递所有的数据，这不是它应该用来做的。

所以这是理想的流程:

从API获取数据
数据存储在Vuex store
参数。id从$route
Id作为getter中的参数被发送到Vuex store
Getter将数据返回给id
数据被用于组件

这样做可以使所有数据集中并在任何组件中可重用。你甚至可以实时看到什么是在Vuex商店通过Chrome工具，点击Vuex选项卡。

如果你有进一步的问题，请告诉我!

相关内容

最新更新

热门标签：