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

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 をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vue-Element-Adminはログインジャンプを実現するために独自のインターフェースを統合しています
  • Vueのハッシュジャンプ原理の詳細な説明
  • Vueページジャンプの実装方法
  • Vueはログイン、登録、終了、ジャンプなどの機能を実装します
  • Vue のルーティングは履歴操作にカウントされません
  • Vue で PC アドレスをモバイル アドレスにリダイレクトする方法

<<:  Spring jdbc のデータベース操作オブジェクト モデルの詳細な例

>>:  Linux で rpm パッケージを見つけるために CD をマウントする方法

推薦する

Vue で debouce の手ぶれ補正機能を使用する方法

目次1. 手ぶれ補正機能2. Vueでdebouceの手ぶれ補正機能を使用する1. 手ぶれ補正機能2...

Linux コマンドラインのクイックヒント: ファイルの検索方法

私たちのコンピューターには、ディレクトリ、写真、ソース コードなどのファイルが保存されています。たく...

JavaScript オブジェクトを比較する 4 つの方法

目次序文参考比較手動比較浅い比較徹底比較要約する序文JavaScript でプリミティブ値を比較する...

Centos8環境でSSHポート番号を変更する方法

目次序文始める序文サーバーのデフォルトの SSH ポート番号は通常 22 であるため、ほとんどのユー...

JavaScript でのモグラ叩きゲームの実装

この記事では、モグラ叩きゲームを実装するためのJavaScriptの具体的なコードを参考までに紹介し...

MySQL 数十億のデータのインポート、エクスポート、移行に関するメモ

最近はMySQLのメモをたくさん取っていますが、それは主に会社のOracleが比較的安定していてメン...

mysql5.7.21.zip インストールチュートリアル

mysql5.7.21 zipの詳細なインストール手順は次のとおりです。 1. 解凍して指定されたデ...

base target="" はリンクのターゲットオープンフレームを制御します

<base target=_blank> は、基本リンクのターゲット フレームを新しいペ...

Dockerコンテナでは、イメージを簡素化してサイズを縮小する方法を詳しく説明しています

目次1.画像レイヤーの数を減らす1. 命令の統合2. 多段階ビルド3. スクワッシュ機能を有効にする...

CSS 要素で計算されたスタイルを取得します (カスケード/最終スタイル後)

CSS 要素内の計算されたスタイル (つまり、カスケード後の最終的なスタイル) を取得するには、W3...

ウェブデザインの詳細分析に関する詳細な議論

設計業務では、設計者がレビューに参加したり、リーダーの一部が設計案の詳細が足りないと言っているのをよ...

テキストエリアのテキストをHTMLに変換する方法、つまり復帰改行について

説明: テキストエリアの値の改行を新しい行に変更しますコードをコピーコードは次のとおりです。 <...

ユーザー エクスペリエンス デザイナーとは誰ですか?

怖いですね! 写真の翻訳: (内側から外側へ)最初のレイヤー:ユーザーエクスペリエンス第2層:コンテ...

Ubuntu 20.04でAliソースを変更する方法

なお、この記事では、単に 20.04 ソースに変更する方法を説明するのではなく、20.04 に基づい...

MySQLのカバーインデックスに関する知識ポイントのまとめ

インデックスにクエリする必要があるすべてのフィールドの値が含まれている(またはカバーしている)場合、...