ページの説明: メインページ: 名前 —> 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 をマウントする方法
目次MySQL マスタースレーブ同期原理の簡単な分析1. マスタースレーブとは何ですか? 2. 主従...
並べ替えツールLinux の sort コマンドは、テキスト ファイルの内容を並べ替えるために使用さ...
結果: html <nav id="nav-1"> <a cl...
Vueボタンコンポーネントのカスタムカプセル化コードは参考用です。具体的な内容は次のとおりです。ボタ...
目次不規則なフォームの実装透明な部分をクリックする不規則なフォームの実装ここでは円形フォームを実装し...
TensorFlow をディープラーニングに使うとビデオメモリ不足がよく起こるので、GPU 使用状況...
環境サーバー: centos7クライアント: ウィンドウCentos7 に docker+gitla...
以下は、CentOS 6 または CentOS 7 サーバーのディスク領域をクリアするための簡単なコ...
以下の目標を達成するため: Mysql データベースは、一定の間隔 (2 時間または 1 日、カスタ...
ウェブサイト管理者は、さまざまな理由や操作により、ウェブサイトのデータを誤って削除したり、ウェブサイ...
この記事では、入力ボックスコンポーネントを手動で実装するための具体的なコードを参考までに紹介します。...
目次背景技術的ソリューション具体的な実装要約する背景Element UI は、PC で人気の Vue...
背景情報最近、Windows パフォーマンスに関する本を読み直しています。以前は SCOM 監視を使...
MySQL バージョン 5.5 および 5.6 を標的とする Riddle 脆弱性により、中間者攻撃...
Gtid + Mha + Binlog サーバー構成: 1: テスト環境OS: CentOS 6.5...