route.params ist nicht definiert, wenn Daten zwischen Komponenten über route.push übergeben werden

Question

Ich möchte Daten von Homepage.vue an clickthru.vue übergeben.

Klicken Sie auf einen Datensatz in der Tabelle (in Homepage.vue) Ich möchte zu einer neuen Komponente weiterleiten (clickthru.vue). Das Ziel besteht darin, zwei Arten von Daten auf zwei verschiedene Arten zu übergeben:

Zuerst: Ich möchte cve_id als route.query übergeben

/clickthru?cve_id=CVE-xxxx-xxxx

Zweitens: Ich möchte auch ein Objekt als Parameter zum Rendern/Installieren auf der HTML-Vorlage von clickthru.vue übergeben.该对象看起来像这样:

{ "cve": "CVE-2022-45869", "Schweregrad": "Mittel", "Pakete": [ { " ;Paket": "Kernel", "Version": "5.15.80.1", "Besitzer": "joslobo", "Erkennungsdatum": "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“: [ „Nicht zugewiesen“ ] } } }, { "Paket": "Kernel", "Version": "5.10.155.1", "Besitzer": "joslobo", "Erkennungsdatum": "12-03- 2022“, „BranchStatus“: { „1.0“: { „sourceBranch“: „1.0“, „status“: „Unpatched“, „detectedOn“: „12-03-2022“ , „patchedOn“: „NULL“, „firstPatchedPackageRelease“: „NULL“, „fixReleaseDate“: „NULL“, „aid“: „11573“, „qid“: [ „Nicht Zugewiesen" ] }, „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>

methoden: {
   onAboutClick(cve_id, cve_obj) {
     console.log('----> cve_id = ', cve_id)
     console.log('----> cve_obj = ', cve_obj) // cve_obj wurde an dieser Stelle erfolgreich gedruckt
     this.$router.push(
        {
          Name: 'clickthru',
          Abfrage: {'cve_id': cve_id},
          Parameter: {'cve_obj': cve_obj}
        })}

clickthru.vue

<script>
    Standard exportieren {

        Requisiten: ['cve_id', 'cve_obj'],

    Daten() {
        zurückkehren {
            cve_id: this.$route.query.cve_id,
            cve_obj: this.$route.params.cve_obj, // cve_obj ist undefiniert 
        };
    },

ma​​​​in.js

constroutes = [
   {
        Pfad: '/clickthru',
        Name: 'clickthru',
        Komponente: Clickthru,
        Requisiten: stimmt
    }
]

如下所示, 当$route

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

正如我在评论中提到的，将对象作为查询参数传递并不是一种受欢迎的方式，因此有两种方法可以做到这一点 -

方法 1-
仅将 cve_id 传递给新路由，并在安装新路由的页面时，使用此查询参数 cve_id 从后端获取 cve_object。 这种方法很有用，值得推荐，因为您始终会从后端获得更新的数据。

如果您遵循这种方法，那么需要进行一些更改 -

1. 在 Homepage.vue 中仅将 cve_id 传递给您的新路线 -

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

2. 在 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 调用中获取。

如果您遵循这种方法，那么过程将是这样的-

1. 当您在 HomePage.vue 中收到后端响应时，将其转储到状态中，如下所示 -

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

2. 与方法一相同，您的路由查询中有 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。