route.params is not defined when passing data between components via route.push-PHP Chinese Network Q&A

I want to pass data from Homepage.vue to clickthru.vue.

Click a record in the table (in Homepage.vue) I want to route to a new component (clickthru.vue). The goal is to pass two types of data in two different ways:

First: I want to pass cve_id as route.query like this

/clickthru?cve_id=CVE-xxxx-xxxx

Second: I also want to pass an object as a parameter to render/install on the html template of clickthru.vue.该对象看起来像这样：

{ "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" ] } } } ] }

In my homepage.vue, I iterate over the records/objects and display them in table format like this: 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

This way you will have your records in that state, so you can use the querycve_idon any page to find any single record.

Notice-
I only give the idea of getting and setting data from state. If you want to take the second approach, just readVuexand follow the documentation. You can also check out the complete guide hereHow to setup Vuexin a Vue application.