Vue におけるクエリとパラメータの役割

Vue ルーティングでは、クエリは、/products?page=2&sort=price などのページ ルートに影響を与えない追加情報を渡すために使用されます。params は、ページ ルートのパラメーター部分を定義するために使用されます。 /products/:id として。

Vue におけるクエリとパラメータの役割

Vue ルーティングでは、query とparams さまざまな役割を果たし、さまざまな目的を果たします。

クエリ

• 関数: ページ ルート自体に影響を与えない追加情報を URL に渡します。
• 構文: this.$route.query[パラメータ名]
• 使用法: 通常、フィルターを渡すために使用されます。ページング、または情報の検索。例:

<code>/products?page=2&sort=price</code>

コンポーネントでは、query オブジェクトを使用してこれらの追加パラメータにアクセスできます:

<code class="javascript">export default {
  data() {
    return {
      currentPage: this.$route.query.page,
      sortOrder: this.$route.query.sort,
    }
  }
}</code>

params

• 関数: 特定のページ ルートのパラメーター部分を定義します。これは、対応するコンポーネントを照合してレンダリングするために使用されます。
• 構文: this.$route.params[パラメータ名]
• 使用法: params URL パスから動的パラメータを抽出するために使用されます。例:

<code>/products/:id</code>

コンポーネントでは、params オブジェクトを使用してこれらの動的パラメータにアクセスできます:

<code class="javascript">export default {
  data() {
    return {
      productId: this.$route.params.id,
    }
  }
}</code>

summary

query と params は、Vue ルーティングでは異なる目的を持っています。 query は追加情報を渡すために使用され、params はページ ルートのパラメーター部分を定義するために使用されます。それらの目的を理解することで、Vue アプリケーションで URL とルートを効果的に管理できます。

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