Route.push 経由でコンポーネント間でデータを受け渡す場合、route.params が定義されていません

Question

<p><em>Homepage.vue</em> から <em>clickthru.vue</em> にデータを渡したいと考えています。 </p> <p>テーブル内のレコードをクリックします (Homepage.vue 内) 新しいコンポーネント (clickthru.vue) にルーティングしたいと考えています。 目標は、2 種類のデータを 2 つの異なる方法で渡すことです。 </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>2 番目: </strong> また、clickthru.vue の HTML テンプレートにレンダリング/インストールするパラメータとしてオブジェクトを渡したいと考えています。このオブジェクトを見る起来像は次のとおりです：</p> <pre class="brush:php;toolbar:false;">{ "cve": "CVE-2022-45869"、"重大度": "中"、"パッケージ": [ { " ;パッケージ": "カーネル"、"バージョン": "5.15.80.1"、"所有者": "joslobo"、"検出日": "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": [ "未割り当て" ] } } }, { "パッケージ": "カーネル"、"バージョン": "5.10.155.1"、"所有者": "joslobo"、"検出日": "12-03- 2022", "BranchStatus": { "1.0": { "sourceBranch": "1.0", "status": "Unpatched", "detectedOn": "12-03-2022" 、"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> </テンプレート> </テンプレート> </tbody></pre> <pre class="brush:php;toolbar:false;">メソッド: { 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} })} <p><strong>clickthru.vue</strong></p> <pre class="brush:php;toolbar:false;"><script> デフォルトのエクスポート { 小道具: ['cve_id', 'cve_obj'], データ（） { 戻る { cve_id: this.$route.query.cve_id, cve_obj: this.$route.params.cve_obj, // cve_obj は未定義です }; },</pre> <p>ma​​ in.js</strong></p> <pre class="brush:php;toolbar:false;">const Routes = [ { パス: '/clickthru', 名前: 'クリックスルー'、 コンポーネント: クリックスルー、 小道具: true } ]</pre> <p>以下に示すように、<em>$route</em> がログに記録されると、クエリは正常に認識されますが、パラメータは空です。</p> <pre class="brush:php;toolbar:false;">{ "fullPath": "/clickthru?cve_id=CVE-2022-45869", "hash": "", "query" ;: { "cve_id": "CVE-2022-45869" }, "名前": "クリックスルー"、"パス": "/クリックスルー"、"パラメータ": {}、"一致": [ { "パス": "/クリックスルー"、" ;name": "クリックスルー"、"メタ": {}、"プロパティ": { "デフォルト": false }、"子": []、"インスタンス": { "デフォルト": 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 の一部 パラメータ、要素、またはその他の方法でこの点をどのように達成するかに関する提案はすべて、有益です。

Answer 1

コメントで述べたように、オブジェクトをクエリ パラメーターとして渡すことは一般的な方法ではないため、これを行うには 2 つの方法があります -

方法 1-
cve_id のみを新しいルートに渡し、新しいルートのページをインストールするときに、このクエリ パラメーター cve_id を使用してバックエンドから cve_object を取得します。 バックエンドから常に更新されたデータを取得できるため、このアプローチは便利であり、推奨されます。

このアプローチに従う場合、いくつかの変更を加える必要があります -

1. Homepage.vue で、cve_id を新しいルートに渡すだけです -

リーリー

2. インストールされたフック clickthru.vue で API 呼び出しを初期化し、その ID の cve_data-
を取得します。

リーリー

方法 2-
HomePage.vue (ループしているもの) でレコードを受信したら、このデータを Vuex 状態に保存します。ここで、方法 1 と同様に、cve_id を新しいルートに渡し、追加の API 呼び出しからではなく、新しいルートのページがインストールされたときに Vuex 状態から取得します。

このアプローチに従う場合、プロセスは次のようになります -

1. HomePage.vue でバックエンド応答を受信したら、次のような状態にダンプします -

リーリー

2. 方法 1 と同様に、ルート クエリに cve_id があるため、それを使用して、関連する cve_object を状態から取得できます。したがって、clickthru.vue をインストールした後、次の操作を実行します -

リーリー

これにより、レコードがその状態になるため、任意のページでクエリ cve_id を使用して任意の 1 つのレコードを検索できます。

＃＃＃＃＃＃知らせ-＃＃＃＃＃＃ 状態からデータを取得して設定するというアイデアだけを示します。 2 番目のアプローチを採用する場合は、

Vuex を読み、ドキュメントに従ってください。 ここで完全なガイドを確認することもできます。Vue アプリケーションで Vuex をセットアップする方法
。