vueで渡すルートパラメータの使い方

この記事では、主に Vue でのルーティング パラメーター転送で発生する落とし穴に関する関連情報をサンプル コードを通じて詳しく紹介します。学習や作業に役立つ特定の学習価値があります。必要な方はフォローしてください。編集者と一緒に。

はじめに

vueには多くの種類のルートジャンプパラメータがありますが、私がよく使うのは以下のパラメータです

• router-linkからジャンプ

• プログラミングナビゲーションからルートジャンプします

この記事では主に、vue ルーティング パラメーターを渡すときに遭遇するいくつかの落とし穴を紹介し、参考と学習のために共有します。以下では多くを説明しません。詳細な紹介を見てみましょう。

まず最初にルートの定義です

{
 path: '/b',
 name: 'B',
 component: resolve => require(['../pages/B.vue'], resolve)
}

コンポーネントAからコンポーネントBにジャンプし、ルーティング情報オブジェクトを通していくつかのパラメータを渡します

this.$router.push({
 path: '/b',
 params: {
  paramA: 'a' 
 },
 query:{
  paramB: 'b'
 }
})

コンポーネントBのパラメータを取得します

this.$route.query.paramB  //b
this.$route.params.paramA //undefined

paramsを通して渡しますルートのオブジェクト パラメータ paramB は常に未定義であり、その理由は決して見つかりません。情報を調べた結果、ルートの params オブジェクトはパスではなくルート名で呼び出す必要があり、クエリ オブジェクトにはこの要件がないことが最終的にわかりました。

そこでコードを変更します:

this.$router.push({
 name: 'B',
 params: {
  paramA: 'a' 
 },
 query:{
  paramB: 'b'
 }
})

現時点では、パラメータを取得するときはすべて正常です。

以上が皆さんのためにまとめたもので、今後皆さんのお役に立てれば幸いです。

関連記事:

WeChat ミニ プログラムでオーディオ コンポーネントを使用する方法

WeChat ミニ プログラムでビデオを再生するためにビデオ コンポーネントを使用する方法

WeChat ミニプログラム

携帯電話番号検証ツール PhoneUtils を JavaScript で使用する方法

以上がvueで渡すルートパラメータの使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。