Route.push 経由でコンポーネント間でデータを受け渡す場合、route.params が定義されていません
P粉022285768
2023-09-01 19:17:09
<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 の一部
パラメータ、要素、またはその他の方法でこの点をどのように達成するかに関する提案はすべて、有益です。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
コメントで述べたように、オブジェクトをクエリ パラメーターとして渡すことは一般的な方法ではないため、これを行うには 2 つの方法があります -
方法 1-
cve_idのみを新しいルートに渡し、新しいルートのページをインストールするときに、このクエリ パラメーターcve_idを使用してバックエンドからcve_objectを取得します。 バックエンドから常に更新されたデータを取得できるため、このアプローチは便利であり、推奨されます。このアプローチに従う場合、いくつかの変更を加える必要があります -
- Homepage.vue で、
リーリーcve_idを新しいルートに渡すだけです -- インストールされたフック
を取得します。
リーリーclickthru.vueで API 呼び出しを初期化し、その ID のcve_data-方法 2-
HomePage.vue(ループしているもの) でレコードを受信したら、このデータを Vuex 状態に保存します。ここで、方法 1 と同様に、cve_idを新しいルートに渡し、追加の API 呼び出しからではなく、新しいルートのページがインストールされたときに Vuex 状態から取得します。このアプローチに従う場合、プロセスは次のようになります -
- HomePage.vue でバックエンド応答を受信したら、次のような状態にダンプします -
リーリー- 方法 1 と同様に、ルート クエリに
リーリーcve_idがあるため、それを使用して、関連するcve_objectを状態から取得できます。したがって、clickthru.vueをインストールした後、次の操作を実行します -これにより、レコードがその状態になるため、任意のページでクエリ
＃＃＃＃＃＃知らせ-＃＃＃＃＃＃ 状態からデータを取得して設定するというアイデアだけを示します。 2 番目のアプローチを採用する場合は、cve_idを使用して任意の 1 つのレコードを検索できます。Vuex を読み、ドキュメントに従ってください。 ここで完全なガイドを確認することもできます。Vue アプリケーションで Vuex をセットアップする方法
。