Vue がパラメーターを使用してジャンプを実装する方法

この記事では、パラメーターを使用してジャンプを実装する Vue の方法を詳しく紹介します。一定の参考値があるので、困っている友達が参考になれば幸いです。

##メイン ページ: name —>shishengzuotanhuichaxun

#このページのテーブルのデータは、以下を介してバックエンドから取得されます。インターフェイス 配列オブジェクトを取得してレンダリングします。データの各行には、対応する行 ID があります。目的は、各行 ID に基づいて、対応するサブ詳細ページ

subpage (詳細ページ) にジャンプすることです。テーブル内のデータの行。): name —> Cinfo

##このページは、行 ID

# を取得した後に対応するインターフェイスを呼び出すことによってレンダリングされるページです。 ##プロジェクトの紹介とパラメーターを使用した使用法 ジャンプの理由:

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

実装プロセス:

#step1: vue-router の下の js ファイルで、サブ詳細ページのルーティングを次のように変更します。

path 属性に「/:id」を追加し、name 属性を追加します。目的は、ジャンプ時に URL の後に ID を追加して、別のサブ詳細ページに入ることができるようにすることです。

step2:

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

注:

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

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

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

#step3:

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

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

推奨学習:

vue.js チュートリアル

以上がVue がパラメーターを使用してジャンプを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。