我想將資料從 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": [ { " “套件”：“核心” 、「版本」：「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” ] } } } ] }

在我的homepage.vue中，我迭代記錄/物件並以表格格式顯示，如下所示： Homepage.vue

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

透過這種方式，您將在該州擁有您的記錄，因此您可以在任何頁面上使用查詢cve_id查找任何單一記錄。

注意-
# 我只給出從狀態獲取和設定資料的想法。如果您想採用第二種方法，只需閱讀Vuex並遵循文件即可。 您也可以在此處查看完整指南如何在 Vue 應用程式中設定 Vuex。