Route.push를 통해 구성요소 간에 데이터를 전달할 때 Route.params가 정의되지 않습니다.

Question

Homepage.vue에서 clickthru.vue로 데이터를 전달하고 싶습니다.

테이블(Homepage.vue)에서 레코드를 클릭하세요. 새 구성요소(clickthru.vue)로 라우팅하고 싶습니다. 목표는 두 가지 다른 방식으로 두 가지 유형의 데이터를 전달하는 것입니다.

첫 번째: 이와 같이 cve_id를 Route.query로 전달하고 싶습니다

/clickthru?cve_id=CVE-xxxx-xxxx

두 번째: 또한 clickthru.vue의 HTML 템플릿에 렌더링/설치하기 위해 개체를 매개변수로 전달하고 싶습니다.该对象看起来image这样：

{ "cve": "CVE-2022-45869", "심각도": "중간", "패키지": [ { " ;패키지": "커널", "버전": "5.15.80.1", "소유자": "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": "패치되지 않음", "DetectedOn": "12-03-2022", "patchedOn": "NULL", "firstPatchedPackageRelease": "NULL", "fixReleaseDate": "NULL", "aid": "11574", "qid": [ "할당되지 않음" ] } } }, { "패키지": "커널", "버전": "5.10.155.1", "소유자": "joslobo", "감지_날짜": "12-03- 2022", "BranchStatus": { "1.0": { "sourceBranch": "1.0", "status": "패치되지 않음", "DetectedOn": "2022-03-12" , "patchedOn": "NULL", "firstPatchedPackageRelease": "NULL", "fixReleaseDate": "NULL", "aid": "11573", "qid": [ "Not 할당됨' ] }, "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">
        <Object.keys(cve.packages)의 템플릿 v-for="(pack_key, index)">
            <tr>
                <td>
                    <span v-if="index == 0" @click.prevent="onAboutClick(cve.cve, cve.packages)">
                                        {{cve.cve}}
                    </스팬>
               </td>
            </tr>
       </템플릿>
    </템플릿>
</tbody>

메서드: {
   onAboutClick(cve_id, cve_obj) {
     console.log('----> cve_id = ', cve_id)
     console.log('----> cve_obj = ', cve_obj) // 이 시점에서 cve_obj가 성공적으로 인쇄되었습니다.
     this.$router.push(
        {
          이름: '클릭스루',
          쿼리: {'cve_id': cve_id},
          매개변수: {'cve_obj': cve_obj}
        })}

clickthru.vue

<script>
    기본값 내보내기 {

        소품: ['cve_id', 'cve_obj'],

    데이터() {
        반품 {
            cve_id: this.$route.query.cve_id,
            cve_obj: this.$route.params.cve_obj, // cve_obj는 정의되지 않았습니다. 
        };
    },

ma​​​​in.js

const 경로 = [
   {
        경로: '/클릭스루',
        이름: '클릭스루',
        구성요소: 클릭연결,
        소품: 사실
    }
]

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

{ "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": {}, " ;컴포넌트": { "기본값": { "속성": [ "cve_id", "cve_obj" ], "__hmrId": "91ec59e3", "__file": "E:/ASTROLABE_FE/CBL-Mariner-CVE-Website/src/comComponents/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를 전달하세요 -

으아악

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

으아악

방법 2-
HomePage.vue에서 레코드(루프되는 레코드)를 받으면 이 데이터를 VuexHomePage.vue 中收到记录（正在循环的记录）时，请将此数据保存到您的 Vuex 状态。现在，与方法一相同，仅将 cve_id 상태. 이제 방법 1과 동일하게 를 새 경로에 전달하고 새 경로의 페이지가 설치될 때 추가 API 호출 대신 Vuex

상태에서 가져옵니다.

이 방법을 따르면 과정은 이렇습니다-

HomePage.vue에서 백엔드 응답을 받으면 아래와 같은 상태로 덤프하세요 -

으아악
2. cve_id，因此可以使用它从状态获取相关的 cve_object。因此，在安装了 clickthru.vue방법 1과 동일합니다. 경로 쿼리에
가 있으므로 이를 사용하여 상태에서 관련 cve_object를 가져올 수 있습니다. 따라서 clickthru.vue를 설치한 후 다음을 수행하세요 -

으아악 cve_id이렇게 하면 해당 상태의 기록이 유지되므로 모든 페이지에서 쿼리

를 사용하여 단일 기록을 찾을 수 있습니다.

주의-
나는 단지 상태로부터 데이터를 얻고 설정한다는 아이디어만 제시합니다. 두 번째 접근 방식을 채택하려면 Vuex을 읽고 설명서를 따르세요. Vue 애플리케이션에서 Vuex를 설정하는 방법

에서 전체 가이드를 확인할 수도 있습니다. 🎜