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 をマウントする方法

推薦する

この記事では、MySQLのマスタースレーブ同期の原理を説明します。

目次MySQL マスタースレーブ同期原理の簡単な分析1. マスタースレーブとは何ですか? 2. 主従...

Linux コマンド sort、uniq、tr ツールの詳細な説明

並べ替えツールLinux の sort コマンドは、テキスト ファイルの内容を並べ替えるために使用さ...

メニューのホバー効果を実現するCSS3

結果: html <nav id="nav-1"> <a cl...

Vueカスタムカプセル化ボタンコンポーネント

Vueボタンコンポーネントのカスタムカプセル化コードは参考用です。具体的な内容は次のとおりです。ボタ...

Electronで不規則な形状の透明部分をクリックする実装

目次不規則なフォームの実装透明な部分をクリックする不規則なフォームの実装ここでは円形フォームを実装し...

Linux での NVIDIA GPU 使用状況の監視の詳細な説明

TensorFlow をディープラーニングに使うとビデオメモリ不足がよく起こるので、GPU 使用状況...

docker+gitlab+gitlab-runnerの詳細なデプロイメント

環境サーバー: centos7クライアント: ウィンドウCentos7 に docker+gitla...

CentOS 6 または CentOS 7 でディスク領域をクリアする方法

以下は、CentOS 6 または CentOS 7 サーバーのディスク領域をクリアするための簡単なコ...

Mysql はテーブル内の古いデータを定期的にクリアし、いくつかのデータを保持します (推奨)

以下の目標を達成するため: Mysql データベースは、一定の間隔 (2 時間または 1 日、カスタ...

MySQLバイナリログを介してデータベースデータを復元する方法の詳細な説明

ウェブサイト管理者は、さまざまな理由や操作により、ウェブサイトのデータを誤って削除したり、ウェブサイ...

JavaScriptは入力ボックスコンポーネントを実装します

この記事では、入力ボックスコンポーネントを手動で実装するための具体的なコードを参考までに紹介します。...

vueはel-tableの列幅の適応を完璧に実現します

目次背景技術的ソリューション具体的な実装要約する背景Element UI は、PC で人気の Vue...

Zabbix で Windows のパフォーマンスを監視する方法

背景情報最近、Windows パフォーマンスに関する本を読み直しています。以前は SCOM 監視を使...

MySQL がユーザー名とパスワードの漏洩を引き起こす可能性のある Riddle の脆弱性を公開

MySQL バージョン 5.5 および 5.6 を標的とする Riddle 脆弱性により、中間者攻撃...

Mysql GTID Mha 設定方法

Gtid + Mha + Binlog サーバー構成: 1: テスト環境OS: CentOS 6.5...