我想将数据从 Homepage.vue 传递到 clickthru.vue。

单击表中的记录（在 Homepage.vue 中） 我想路由到一个新组件（clickthru.vue）。 目标是以两种不同的方式传递两种数据：

首先：我想将cve_id作为route.query传递，如下所示

/clickthru?cve_id=CVE-xxxx-xxxx

第二：我还想传递一个对象作为参数来渲染/安装在clickthru.vue的html模板上。该对象看起来像这样：

{ "cve": "CVE-2022-45869", "severity": "Medium", "packages": [ { "package": "kernel", "version": "5.15.80.1", "owner": "joslobo", "detection_date": "12-03-2022", "BranchStatus": { "1.0": { "sourceBranch": "NULL", "status": "NULL", "detectedOn": "NULL", "patchedOn": "NULL", "firstPatchedPackageRelease": "NULL", "fixReleaseDate": "NULL", "aid": "NULL", "qid": [ "NULL" ] }, "2.0": { "sourceBranch": "2.0", "status": "Unpatched", "detectedOn": "12-03-2022", "patchedOn": "NULL", "firstPatchedPackageRelease": "NULL", "fixReleaseDate": "NULL", "aid": "11574", "qid": [ "Not Assigned" ] } } }, { "package": "kernel", "version": "5.10.155.1", "owner": "joslobo", "detection_date": "12-03-2022", "BranchStatus": { "1.0": { "sourceBranch": "1.0", "status": "Unpatched", "detectedOn": "12-03-2022", "patchedOn": "NULL", "firstPatchedPackageRelease": "NULL", "fixReleaseDate": "NULL", "aid": "11573", "qid": [ "Not Assigned" ] }, "2.0": { "sourceBranch": "NULL", "status": "NULL", "detectedOn": "NULL", "patchedOn": "NULL", "firstPatchedPackageRelease": "NULL", "fixReleaseDate": "NULL", "aid": "NULL", "qid": [ "NULL" ] } } } ] }

在我的homepage.vue中，我迭代记录/对象并以表格格式显示，如下所示： Homepage.vue

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

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

clickthru.vue

<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 
        };
    },

ma​​​​in.js

const routes = [
   {
        path: '/clickthru',
        name: 'clickthru',
        component: clickthru,
        props: true
    }
]

如下所示，当$route被记录时，查询被成功识别，但是，params为空。

{ "fullPath": "/clickthru?cve_id=CVE-2022-45869", "hash": "", "query": { "cve_id": "CVE-2022-45869" }, "name": "clickthru", "path": "/clickthru", "params": {}, "matched": [ { "path": "/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" }

我希望能够传递 cve_obj 而不是 url/path 的一部分 任何关于如何通过参数、元或任何其他方式做到这一点的提示都值得赞赏