ホームページ > ウェブフロントエンド > Vue.js > vue でのパラメータとクエリの使用法

vue でのパラメータとクエリの使用法

下次还敢
リリース: 2024-04-30 03:00:32
オリジナル
1181 人が閲覧しました

Vue では、動的ルーティング フラグメントとクエリ文字列パラメーターにアクセスするために、params と query が使用されます。 params オブジェクトには動的ルート フラグメントの値が含まれ、クエリ オブジェクトにはクエリ文字列内のパラメータと値のペアが含まれます。 params はルートの一部ですが、query はルートの一部ではないため、ルートのマッチングに影響します。 $route オブジェクトを通じて params にアクセスしてクエリを実行し、それらを使用してナビゲーション時にデータを渡すことができます。

vue でのパラメータとクエリの使用法

Vue での paramsquery の使用

Vue ルーティング、params および query は、密接に関連する 2 つの概念です:

params

params オブジェクトには、現在のルートの動的フラグメントの値が含まれます。動的フラグメントは、ルートのパスで : プレフィックスを使用する名前付きフラグメント (/user/:id など) です。

<code class="js">const User = {
  template: '<p>User ID: {{ $route.params.id }}</p>'
}</code>
ログイン後にコピー

ルートが /user/123 と一致する場合、$route.params には次のオブジェクトが含まれます:

<code class="js">{ id: '123' }</code>
ログイン後にコピー

query

query オブジェクトには、現在のルート クエリ文字列のパラメータが含まれます。クエリ文字列は、URL 内の ? 番号の後のパラメータと値のペアです (?page=2&sort=desc など)。

<code class="js">const SearchResults = {
  template: '<p>Page: {{ $route.query.page }}</p>'
}</code>
ログイン後にコピー

ルートが /search?page=2&sort=desc と一致する場合、$route.query には次のオブジェクトが含まれます:

<code class="js">{ page: '2', sort: 'desc' }</code>
ログイン後にコピー

params と query

paramsquery の重要な違いの 1 つは、params がルートの一部であることです。 while クエリ いいえ。これは、params はルート マッチングに影響しますが、query は影響しないことを意味します。たとえば、ルート /user/:id は、有効な id パラメータを持つ URL のみと一致します。ただし、/search ルートは、クエリ文字列の有無にかかわらず、任意の URL と一致します。

params と queryの使用

paramsquery には、$route を通じてアクセスできます。オブジェクトオブジェクト。ナビゲーションには、$router.push または $router.replace メソッドを使用できます。どちらも params または query

の受け渡しをサポートしています。物体。

<code class="js">// 使用 params 导航
this.$router.push({ name: 'user', params: { id: '123' } })

// 使用 query 导航
this.$router.push({ name: 'search', query: { page: 2, sort: 'desc' } })</code>
ログイン後にコピー
summary

paramsquery

は Vue ルーティングの重要な概念であり、動的ルーティング フラグメントにアクセスするために使用され、クエリ文字列パラメータ。 Vue ルーティングを効果的に使用するには、この 2 つの違いを理解することが重要です。 ###

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

関連ラベル:
vue
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート