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

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

Vue での params と query の使用

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

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

params と queryの使用

params と query には、$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

params と query

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

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