route.params tidak ditakrifkan apabila menghantar data antara komponen melalui route.push

Question

Saya mahu menghantar data daripada Homepage.vue kepada clickthru.vue.

Klik rekod dalam jadual (dalam Homepage.vue) Saya mahu membuat laluan ke komponen baharu (clickthru.vue). Matlamatnya adalah untuk menghantar dua jenis data dalam dua cara berbeza:

Pertama: Saya mahu lulus cve_id sebagai route.query seperti ini

/clickthru?cve_id=CVE-xxxx-xxxx

Kedua: Saya juga mahu menghantar objek sebagai parameter untuk membuat/memasang pada templat html clickthru.vue.该对象看起来像这样：

{ "cve": "CVE-2022-45869", "keterukan": "Sederhana", "pakej": [ { " ;pakej": "kernel", "versi": "5.15.80.1", "pemilik": "joslobo", "tarikh_pengesan": "12-03-2022", "Status Cawangan : { "1.0": { "sourceBranch": "NULL", "status": "NULL", "dikesanPada": "NULL", "patchedOn": "NULL", " ;firstPatchedPackageRelease": "NULL", "fixReleaseDate": "NULL", "bantuan": "NULL", "qid": [ "NULL" ] }, "2.0": { "Cawangan sumber": "2.0", "status": "Tidak Ditambal", "dikesanPada": "12-03-2022", "ditampal": "NULL", "firstPatchedPackageRelease": "NULL", "fixReleaseDate": "NULL", "bantuan": "11574", "qid": [ "Tidak Ditugaskan" ] } } }, { "pakej": "kernel", "versi": "5.10.155.1", "pemilik": "joslobo", "tarikh_pengesan": "12-03- 2022", "Status Cawangan": { "1.0": { "cabang sumber": "1.0", "status": "Tidak Ditampal", "dikesanPada": "12-03"202 , "patchedOn": "NULL", "firstPatchedPackageRelease": "NULL", "fixReleaseDate": "NULL", "bantuan": "11573", "[qquot;";" Ditugaskan" ] }, "2.0": { "sourceBranch": "NULL", "status": "NULL", "dikesanPada": "NULL", "ditampalPada": "NULL", "firstPatchedPackageRelease": "NULL", "fixReleaseDate": "NULL", "bantuan": "NULL", "qid": [ "NULL" ] } } } ] }</pra>
<p>在我的<em>homepage.vue</em>中，我迭代记录/对象并以表格格式显示，如下所：
<strong>Homepage.vue</strong></p>
<pre class="brush:php;toolbar:false;"><tbody>
    <template v-for="(cve) dalam backend_res">
        <template v-for="(kunci_pak, indeks) dalam Object.keys(cve.packages)">
            <tr>
                <td>
                    <span v-if="indeks == 0" @click.prevent="onAboutClick(cve.cve, cve.packages)">
                                        {{cve.cve}}
                    </span>
               </td>
            </tr>
       </template>
    </template>
</tbody>

kaedah: {
   onAboutClick(cve_id, cve_obj) {
     console.log('----> cve_id = ', cve_id)
     console.log('----> cve_obj = ', cve_obj) // cve_obj berjaya dicetak pada ketika ini
     ini.$router.push(
        {
          nama: 'clickthru',
          pertanyaan: {'cve_id': cve_id},
          params: {'cve_obj': cve_obj}
        })}</pra>
<p><strong>clickthru.vue</strong></p>
<pre class="brush:php;toolbar:false;"><script>
    eksport lalai {

        prop: ['cve_id', 'cve_obj'],

    data() {
        kembali {
            cve_id: this.$route.query.cve_id,
            cve_obj: this.$route.params.cve_obj, // cve_obj tidak ditentukan 
        };
    },

ma​​​​in.js

const route = [
   {
        laluan: '/clickthru',
        nama: 'clickthru',
        komponen: clickthru,
        props: benar
    }
]

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

{ "fullPath": "/clickthru?cve_id=CVE-2022-45869", "hash": "", "pertanyaan" ;: { "cve_id": "CVE-2022-45869" }, "nama": "clickthru", "path": "/clickthru", "params": {}, "matched": [ { "path": "/clickthru", " ;nama": "clickthru", "meta": {}, "props": { "lalai": palsu }, "kanak-kanak": [], "contoh": { "lalai": null }, "tinggalkan Pengawal": { "Set(0)": [] }, "kemas kiniPenjaga": { "Tetapkan(0)": [] }, "masukkan Panggilan Balik": {}, " ;komponen": { "lalai": { "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/laluan 的一部分 任何关于如何通过参数、元或任何其他方式做到这一点的提示都值得赞;/p&glt;

Answer 1

Seperti yang saya nyatakan dalam ulasan, menghantar objek sebagai parameter pertanyaan bukanlah cara yang popular, jadi terdapat dua cara untuk melakukannya -

Kaedah 1-
Hanya cve_id 传递给新路由，并在安装新路由的页面时，使用此查询参数 cve_id 从后端获取 cve_object. Pendekatan ini berguna dan disyorkan kerana anda sentiasa mendapat data yang dikemas kini daripada bahagian belakang.

Jika anda mengikuti pendekatan ini, terdapat sedikit perubahan yang perlu dilakukan -

1. Hanya lalu cve_id ke laluan baharu anda di Homepage.vue -

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

2. di clickthru.vue 安装的挂钩上，初始化 API 调用以获取该 id 的 cve_data-

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

Kaedah 2-
Apabila anda menerima rekod (yang digelung) dalam HomePage.vue, simpan data ini ke Status VuexHomePage.vue 中收到记录（正在循环的记录）时，请将此数据保存到您的 Vuex 状态。现在，与方法一相同，仅将 cve_id. Sekarang, sama seperti kaedah satu, cuma hantar ke laluan baharu dan dapatkannya daripada keadaan Vuex

dan bukannya daripada panggilan API tambahan apabila halaman laluan baharu dipasang.

Kalau ikut cara ni, proses jadi macam ni-

Apabila anda menerima respons bahagian belakang dalam HomePage.vue, buangkannya ke dalam keadaan seperti di bawah -

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.vueSama seperti kaedah satu, anda mempunyai
dalam pertanyaan penghalaan anda, jadi anda boleh menggunakannya untuk mendapatkan cve_object yang berkaitan daripada negeri. Jadi selepas memasang clickthru.vue lakukan perkara berikut -

<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_idDengan cara ini anda akan mempunyai rekod anda dalam keadaan itu supaya anda boleh menggunakan pertanyaan

pada mana-mana halaman untuk mencari mana-mana rekod tunggal.

Perhatian-
Saya hanya memberi idea untuk mendapatkan dan menetapkan data dari negeri. Jika anda ingin menggunakan pendekatan kedua, baca sahaja Vuex dan ikuti dokumentasi. Anda juga boleh menyemak panduan lengkap di sini Cara menyediakan Vuex dalam aplikasi Vue

. 🎜