route.params tidak ditakrifkan apabila menghantar data antara komponen melalui route.push
P粉022285768
2023-09-01 19:17:09
<p>Saya mahu menghantar data daripada <em>Homepage.vue</em> kepada <em>clickthru.vue</em>. </p>
<p>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: </p>
<p><strong>Pertama: </strong>Saya mahu lulus <em>cve_id</em> sebagai route.query seperti ini</p>
<pre class="brush:php;toolbar:false;">/clickthru?cve_id=CVE-xxxx-xxxx</pre>
<p><strong>Kedua: </strong> Saya juga mahu menghantar objek sebagai parameter untuk membuat/memasang pada templat html clickthru.vue.该对象看起来像这样:</p>
<pre class="brush:php;toolbar:false;">{ "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></pre>
<pre class="brush:php;toolbar:false;">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
};
},</pre>
<p><strong>main.js</strong></p>
<pre class="brush:php;toolbar:false;">const route = [
{
laluan: '/clickthru',
nama: 'clickthru',
komponen: clickthru,
props: benar
}
]</pre>
<p>如下所示,当<em>$route</em>被记录时,查询被成功识别,但是,params为空。</p>
<pre class="brush:php;toolbar:false;">{ "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" }</pre>
<p>我希望能够传递 cve_obj 而不是 url/laluan 的一部分
任何关于如何通过参数、元或任何其他方式做到这一点的提示都值得赞;/p&glt;
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 -
cve_id
ke laluan baharu anda di Homepage.vue -clickthru.vue
安装的挂钩上,初始化 API 调用以获取该 id 的cve_data
-Kaedah 2-
dan bukannya daripada panggilan API tambahan apabila halaman laluan baharu dipasang.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 Vuexcve_id
,因此可以使用它从状态获取相关的cve_object
。因此,在安装了clickthru.vue
Sama seperti kaedah satu, anda mempunyaicve_object
yang berkaitan daripada negeri. Jadi selepas memasangclickthru.vue
lakukan perkara berikut -cve_id
Dengan 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