透過route.push在元件之間傳遞資料時未定義route.params

Question

<p>我想將資料從 <em>Homepage.vue</em> 傳遞到 <em>clickthru.vue</em>。 </p> <p>點選表格中的記錄（在 Homepage.vue 中） 我想路由到一個新元件（clickthru.vue）。 目標是以兩種不同的方式傳遞兩種資料：</p> <p><strong>首先：</strong>我想將<em>cve_id</em>作為route.query傳遞，如下所示</p> <pre class="brush:php;toolbar:false;">/clickthru?cve_id=CVE-xxxx-xxxx</pre> <p><strong>第二：</strong>我還想傳遞一個物件作為參數來渲染/安裝在clickthru.vue的html模板上。該物體看起來像這樣：</p>

{ "cve": "CVE-2022-45869", "severity": "Medium", "packages": [ { " “套件”：“核心” 、「版本」：「5.15.80.1」、「擁有者」：「joslobo」、「偵測日期」：「12-03-2022」、「BranchStatus」 : { “1.0”: { “sourceBranch”: “NULL” , “狀態”: “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”，“狀態”：“未修補”，“已檢測”：“2022 年3 月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” ] } } } ] }</pre>
<p>在我的<em>homepage.vue</em>中，我迭代記錄/物件並以表格格式顯示，如下所示：
<strong>Homepage.vue</strong></p>
<pre class="brush:php;toolbar:false;"><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></pre>
<pre class="brush:php;toolbar:false;">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}
        })}</pre>
<p><strong>clickthru.vue</strong></p>
<pre class="brush:php;toolbar:false;"><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
        };
    },</pre>
<p><strong>in.js</strong></p>
<pre class="brush:php;toolbar:false;">const routes = [
   {
        path: '/clickthru',
        name: 'clickthru',
        component: clickthru,
        props: true
    }
]</pre>
<p>如下所示，當<em>$route</em>被記錄時，查詢被成功識別，但是，params為空。</p>
{ "fullPath": "/clickthru?cve_id=CVE-2022-45869", "hash": "", "query" ;: { "cve_id」: “CVE-2022-45869”; }, “名稱”: “clickthru”, “路徑”: “/clickthru”, “參數”: {}, “匹配”: [ { “路徑”: “/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” }</pre>
<p>我希望能夠提供 cve_obj 而不是 url/path 的一部分
關於如何透過參數、元或任何其他方式實現這一點的提示都值得讚賞</p>

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。