route.params is not defined when passing data between components via route.push

Question

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

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

As shown below, when $route is logged, the query is successfully recognized, however, the params are empty.

{ "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 的一部分 任何关于如何通过参数、元或任何其他方式做到这一点的提示都值得赞赏

Answer 1

As I mentioned in the comments, passing objects as query parameters is not a popular way, so there are two ways to do it -

method 1-
Pass only the cve_id to the new route and when installing the new route's page, use this query parameter cve_id to get the cve_object from the backend. This approach is useful and recommended because you always get updated data from the backend.

If you follow this approach, there are a few changes that need to be made -

1. In Homepage.vue just pass cve_id to your new route -

methods: {
    onAboutClick(cve_id) {
        this.$router.push({
            name: "clickthru",
            query: { cve_id: cve_id },
        });
    },
},

2. On the clickthru.vue installed hook, initialize the API call to get the cve_data-
for that id

mounted() {
 // Make an API call to fetch the respected id's data
}

Method 2-
When you receive a record in HomePage.vue (the one you are looping over), save this data to your Vuex state. Now, same as method one, just pass the cve_id to the new route and get it from the Vuex state when the new route's page is installed, rather than from an additional API call.

If you follow this approach, the process will be like this -

1. When you receive the backend response in HomePage.vue, dump it into state like this -

const store = new Vuex.Store({
  state: {
    records: []
  },
  mutations: {
    SET_RECORDS (state, backend_response) {
      // mutate state
      state.records = backend_response;
    }
  }
})

2. Same as method one, you have cve_id in your route query, so you can use it to get the relevant cve_object from the state. So after installing clickthru.vue do the following -

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

This way you will have your records in that state, so you can use the query cve_id on 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 read Vuex and follow the documentation. You can also check out the complete guide here How to setup Vuex in a Vue application.