<p>我想将数据从 <em>Homepage.vue</em> 传递到 <em>clickthru.vue</em>。</p>
<p>单击表中的记录（在 Homepage.vue 中）
我想路由到一个新组件（clickthru.vue）。
目标是以两种不同的方式传递两种数据：</p>
<p><strong>首先：</strong>我想将<em>cve_id</em>作为route.query传递，如下所示</p>
<pre class="brush:php;toolbar:false;">/clickthru?cve_id=CVE-xxxx-xxxx</pre>
<p><strong>第二：</strong>我还想传递一个对象作为参数来渲染/安装在clickthru.vue的html模板上。该物体看起来像这样：</p>
{ "cve": "CVE-2022-45869", "severity": "Medium", "packages": [ { " “包”：“内核”、“版本”：“5.15.80.1”、“所有者”：“joslobo”、“检测日期”：“12-03-2022”、“BranchStatus” : { “1.0”: { “sourceBranch”: “NULL”, “状态”: “NULL”, “DetectedOn”: “NULL”, “patchedOn”: “NULL”, “ “firstPatchedPackageRelease”：“NULL”、“fixReleaseDate”：“NULL”、“aid”：“NULL”、“qid”：[“NULL” ] }, "2.0": { "sourceBranch": "2.0", "status": "未打补丁", "DetectedOn": "12-03-2022", "patchedOn": “NULL”、“firstPatchedPackageRelease”：“NULL”、“fixReleaseDate”：“NULL”、“aid”：“11574”、“qid”：[“未分配” ] } } }, { “包”: “内核”, “版本”: “5.10.155.1”, “所有者”: “joslobo”, “检测日期”: “12-03- 2022”，“BranchStatus”：{“1.0”：{“sourceBranch”：“1.0”，“状态”：“未修补”，“已检测”：“2022 年 3 月 12 日” , "patchedOn": "NULL", "firstPatchedPackageRelease": "NULL", "fixReleaseDate": "NULL", "aid": "11573", "qid": [ "Not已分配” ] }, "2.0": { "sourceBranch": "NULL", "status": "NULL", "DetectedOn": "NULL", "patchedOn": "NULL", “firstPatchedPackageRelease”：“NULL”、“fixReleaseDate”：“NULL”、“aid”：“NULL”、“qid”：[“NULL” ] } } } ] }</pre>
<p>在我的<em>homepage.vue</em>中，我迭代记录/对象并以表格格式显示，如下所示：
<strong>Homepage.vue</strong></p>
<pre class="brush:php;toolbar:false;"><tbody>
<template v-for="(cve) in backend_res">
<template v-for="(pack_key, index) in Object.keys(cve.packages)">
<tr>
<td>
<span v-if="index == 0" @click.prevent="onAboutClick(cve.cve, cve.packages)">
{{cve.cve}}
</span>
</td>
</tr>
</template>
</template>
</tbody></pre>
<pre class="brush:php;toolbar:false;">methods: {
onAboutClick(cve_id, cve_obj) {
console.log('----> cve_id = ', cve_id)
console.log('----> cve_obj = ', cve_obj) // cve_obj is successfully printed at this point
this.$router.push(
{
name: 'clickthru',
query: {'cve_id': cve_id},
params: {'cve_obj': cve_obj}
})}</pre>
<p><strong>clickthru.vue</strong></p>
<pre class="brush:php;toolbar:false;"><script>
export default {
props: ['cve_id', 'cve_obj'],
data() {
return {
cve_id: this.$route.query.cve_id,
cve_obj: this.$route.params.cve_obj, // cve_obj is undefined
};
},</pre>
<p><strong>main.js</strong></p>
<pre class="brush:php;toolbar:false;">const routes = [
{
path: '/clickthru',
name: 'clickthru',
component: clickthru,
props: true
}
]</pre>
<p>如下所示，当<em>$route</em>被记录时，查询被成功识别，但是，params为空。</p>
{ "fullPath": "/clickthru?cve_id=CVE-2022-45869", "hash": "", "query" ;: { “cve_id”: “CVE-2022-45869” }, “名称”: “clickthru”, “路径”: “/clickthru”, “参数”: {}, “匹配”: [ { “路径”: “/clickthru”, “ ;name”: “clickthru”, “meta”: {}, “props”: { “default”: false }, “children”: [], “instances”: { “default”: null }, "leaveGuards": { "Set(0)": [] }, "updateGuards": { "Set(0)": [] }, "enterCallbacks": {}, " ;components”: { “default”: { “props”: [ “cve_id”, “cve_obj”; ]、“__hmrId”：“91ec59e3”、“__file”：“E:/ASTROLABE_FE/CBL-Mariner-CVE-Website/src/components/clickthru.vue” } } } ], “meta”: {}, “href”: “/clickthru?cve_id=CVE-2022-45869” }</pre>
<p>我希望能够提供 cve_obj 而不是 url/path 的一部分
关于如何通过参数、元或任何其他方式实现这一点的提示都值得赞赏</p> 
正如我在评论中提到的，将对象作为查询参数传递并不是一种受欢迎的方式，因此有两种方法可以做到这一点 -
方法 1-
仅将
cve_id传递给新路由，并在安装新路由的页面时，使用此查询参数cve_id从后端获取cve_object。 这种方法很有用，值得推荐，因为您始终会从后端获得更新的数据。如果您遵循这种方法，那么需要进行一些更改 -
cve_id传递给您的新路线 -methods: { onAboutClick(cve_id) { this.$router.push({ name: "clickthru", query: { cve_id: cve_id }, }); }, },clickthru.vue安装的挂钩上，初始化 API 调用以获取该 id 的cve_data-mounted() { // Make an API call to fetch the respected id's data }方法 2-
当您在
HomePage.vue中收到记录（正在循环的记录）时，请将此数据保存到您的 Vuex 状态。现在，与方法一相同，仅将cve_id传递给新路由，并在安装新路由的页面时，从 Vuex 状态，而不是从额外的 API 调用中获取。如果您遵循这种方法，那么过程将是这样的-
const store = new Vuex.Store({ state: { records: [] }, mutations: { SET_RECORDS (state, backend_response) { // mutate state state.records = backend_response; } } })cve_id，因此可以使用它从状态获取相关的cve_object。因此，在安装了clickthru.vue后，执行以下操作 -<script> export default { data() { return { cve_object: null, }; }, mounted() { this.cve_object = this.$store.state.records.find( (item) => item.id == this.$route.query.cve_id, ); }, }; </script>通过这种方式，您将在该州拥有您的记录，因此您可以在任何页面上使用查询
cve_id查找任何单个记录。注意-
我只给出从状态获取和设置数据的想法。如果您想采用第二种方法，只需阅读 Vuex 并遵循文档即可。 您还可以在此处查看完整指南 如何在 Vue 应用程序中设置 Vuex。