Vueプロジェクトでパラメータジャンプ機能を実装する

ページの説明:

​ メインページ: 名前 —> shishengzuotanhuichaxun

このページの表のデータは、インターフェイス配列オブジェクトを介してバックエンドから取得され、レンダリングされます。各データ行には対応する行 ID があります。私たちの目標は、表内の各データ行の異なる行 ID に従って、対応するサブ詳細ページにジャンプすることです。

サブページ（詳細ページ）：名前 —> Cinfo

このページは、行IDを取得した後、対応するインターフェースを呼び出してレンダリングされるページです。

プロジェクトの紹介とパラメータジャンプを使用する理由:

このシステムは、Vue を使用してプロジェクト フレームワークを構築し、開発には Vant モバイル フレームワークのコンポーネント ライブラリを使用します。メインページのテーブルは、純粋なネイティブ HTML の th、tr、td を使用して実装されています。Vue ディレクティブ v-for を使用して tr をトラバースし、データをテーブルにレンダリングします。そのため、レンダリングされたテーブル データに対応する詳細ボタンはすべて同じであり、クリック後のページも同じであるため、プロジェクトのビジネス要件に違反しています。したがって、パラメータの受け渡しの実装は特に重要です。パラメータの受け渡し操作の原則は同じテンプレート (Cinfo) を使用することですが、URL パスが異なるため、各サブページの内容は互いに影響を及ぼしません。

実装プロセス:

ステップ1:

vue-router の下の js ファイルで、サブ詳細ページのルートを次のように変更します。

パス属性に ' /:id ' を追加し、新しい名前属性を追加して、異なるサブ詳細ページに入るためにリダイレクトするときに URL の後に id を追加します。

ステップ2:

メインページで、詳細ボタンのバインディング イベントにパラメーターを追加し、v-for 内の項目、つまりインターフェイスを通じて取得した配列オブジェクトをクリック イベント メソッドの仮パラメーターとして使用します。

知らせ：
1.@click=detail( item )、クリック イベントをボタンにバインドするときは、括弧内に item パラメータを追加することを忘れないでください。

2. ここでのpush()メソッドのパスのキー値はES6構文 –> テンプレート文字列（埋め込み式を許可する文字列リテラル）を使用します。

この時点で、詳細ボタンをクリックすると、次に示すように、行 ID がパラメータとしてサブ詳細ページに渡されます。

ステップ3:

次に、メイン ページから渡された ID をサブ詳細ページで取得し、それをリクエスト パラメータとして使用してインターフェイスを呼び出してデータをレンダリングする必要があります。

渡された ID を取得する操作は次のとおりです。

書き方は決まっています。聞かないでください。書き方が分からないだけです（専門家に助けを求めてください！）。 。 。

ここまでで、パラメータジャンプ機能のほとんどの操作を実装しました。サブページで id によってインターフェースを呼び出し、データをレンダリングする残りの操作は示しません。

要約:

多くのメソッドがあります。このメソッドは特定のパラメータでのみジャンプでき、配列またはオブジェクト全体を渡すことはできません。もっと良い方法があれば、ぜひ共有してください。パラメータ付きジャンプの全体的な実装手順は難しくありません。重要なのはアイデアです。私の能力不足のため、この共有はそれほど正確で詳細ではないかもしれません。すべての手順の説明に誤り、不適切さ、または曖昧さがある場合は、私の間違いを指摘してください。 どうぞよろしくお願いいたします。一緒に協力して進歩していきましょう！

Vue プロジェクトにパラメータジャンプ機能を実装する方法についての記事はこれで終わりです。より関連性の高い Vue パラメータジャンプのコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き閲覧してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。