ページの説明: メインページ: 名前 —> 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 内の項目、つまりインターフェイスを通じて取得した配列オブジェクトをクリック イベント メソッドの仮パラメーターとして使用します。 知らせ: 2. ここでのpush()メソッドのパスのキー値はES6構文 –> テンプレート文字列(埋め込み式を許可する文字列リテラル)を使用します。 この時点で、詳細ボタンをクリックすると、次に示すように、行 ID がパラメータとしてサブ詳細ページに渡されます。 ステップ3:次に、メイン ページから渡された ID をサブ詳細ページで取得し、それをリクエスト パラメータとして使用してインターフェイスを呼び出してデータをレンダリングする必要があります。 渡された ID を取得する操作は次のとおりです。 書き方は決まっています。聞かないでください。書き方が分からないだけです(専門家に助けを求めてください!)。 。 。 ここまでで、パラメータジャンプ機能のほとんどの操作を実装しました。サブページで id によってインターフェースを呼び出し、データをレンダリングする残りの操作は示しません。 要約:多くのメソッドがあります。このメソッドは特定のパラメータでのみジャンプでき、配列またはオブジェクト全体を渡すことはできません。もっと良い方法があれば、ぜひ共有してください。パラメータ付きジャンプの全体的な実装手順は難しくありません。重要なのはアイデアです。私の能力不足のため、この共有はそれほど正確で詳細ではないかもしれません。すべての手順の説明に誤り、不適切さ、または曖昧さがある場合は、私の間違いを指摘してください。 どうぞよろしくお願いいたします。一緒に協力して進歩していきましょう! Vue プロジェクトにパラメータジャンプ機能を実装する方法についての記事はこれで終わりです。より関連性の高い Vue パラメータジャンプのコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き閲覧してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: Spring jdbc のデータベース操作オブジェクト モデルの詳細な例
>>: Linux で rpm パッケージを見つけるために CD をマウントする方法
目次1. 手ぶれ補正機能2. Vueでdebouceの手ぶれ補正機能を使用する1. 手ぶれ補正機能2...
私たちのコンピューターには、ディレクトリ、写真、ソース コードなどのファイルが保存されています。たく...
目次序文参考比較手動比較浅い比較徹底比較要約する序文JavaScript でプリミティブ値を比較する...
目次序文始める序文サーバーのデフォルトの SSH ポート番号は通常 22 であるため、ほとんどのユー...
この記事では、モグラ叩きゲームを実装するためのJavaScriptの具体的なコードを参考までに紹介し...
最近はMySQLのメモをたくさん取っていますが、それは主に会社のOracleが比較的安定していてメン...
mysql5.7.21 zipの詳細なインストール手順は次のとおりです。 1. 解凍して指定されたデ...
<base target=_blank> は、基本リンクのターゲット フレームを新しいペ...
目次1.画像レイヤーの数を減らす1. 命令の統合2. 多段階ビルド3. スクワッシュ機能を有効にする...
CSS 要素内の計算されたスタイル (つまり、カスケード後の最終的なスタイル) を取得するには、W3...
設計業務では、設計者がレビューに参加したり、リーダーの一部が設計案の詳細が足りないと言っているのをよ...
説明: テキストエリアの値の改行を新しい行に変更しますコードをコピーコードは次のとおりです。 <...
怖いですね! 写真の翻訳: (内側から外側へ)最初のレイヤー:ユーザーエクスペリエンス第2層:コンテ...
なお、この記事では、単に 20.04 ソースに変更する方法を説明するのではなく、20.04 に基づい...
インデックスにクエリする必要があるすべてのフィールドの値が含まれている(またはカバーしている)場合、...