Vue でルーティングを使用してパラメーターを渡したり受け取ったりするにはどうすればよいですか?

Vue でルーティングを使用してパラメーターを送受信する方法は?

Vue は、最新の応答性の高い Web アプリケーションを構築するための人気のある JavaScript フレームワークです。 Vue では、ルーティングは重要な概念であり、Web ページ間のナビゲーションとジャンプを管理するために使用されます。開発プロセスでは、多くの場合、異なるルート間でデータを受け渡す必要があります。この記事では、ルーティングを使用して Vue でパラメータの受け渡しを行う方法と、対応するコード例を紹介します。

1. ルート パラメーターの受け渡し
   Vue では、ルート パラメーターの受け渡しを使用して、あるルートから別のルートにデータを渡すことができます。これを実現するには、いくつかの方法があります。

1.1 クエリ パラメータ
クエリ パラメータは、?key=value の形式のルーティング URL 内のパラメータです。 $route オブジェクトの query 属性を使用して、渡されたパラメーターを取得できます。以下は、クエリ パラメータを使用してパラメータを渡す例です。

送信側ルートでは、$route.router.push メソッドを使用して受信側ルートにジャンプし、パラメータを渡すことができます:

this.$router.push({
  path: '/receiver',
  query: {
    name: 'John',
    age: 25
  }
});

受信側ルートでは、$route.router.query を使用して、渡されたパラメーターを取得できます。

console.log(this.$route.query.name); // John
console.log(this.$route.query.age); // 25

1.2 動的ルーティング
動的ルーティングは、URL の一部としてパラメーターを / 形式で使用します。 :パラメータ。 $route.params を使用して、渡されたパラメーターを取得できます。以下は、動的ルーティングを使用してパラメーターを渡す例です。

送信側ルートでは、$route.router.push メソッドを使用して受信側ルートにジャンプし、パラメーターを渡すことができます:

this.$router.push({
  path: `/receiver/${this.name}/${this.age}`
});

受信側ルートでは、$route.params を使用して渡されたパラメータを取得できます。

console.log(this.$route.params.name); // John
console.log(this.$route.params.age); // 25

2. ルート受信パラメータ
   ルートによって渡されたパラメータを受信した後、処理し、使用済み。以下に例を示します。

<template>
  <div>
    <h1>Welcome to the receiver page!</h1>
    <p>Name: {{ name }}</p>
    <p>Age: {{ age }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: '',
      age: ''
    }
  },
  mounted() {
    this.name = this.$route.query.name;
    this.age = this.$route.query.age;
    // 或者 this.name = this.$route.params.name;
    //     this.age = this.$route.params.age;
  }
};
</script>

上の例は、受信側コンポーネントで $route オブジェクトを使用して、ルートによって渡されるクエリ パラメーターまたは動的パラメーターを取得する方法を示しています。渡されたパラメータをコンポーネントのデータ属性に割り当てて、テンプレートで使用します。

概要
ルーティングを使用して Vue でパラメータを渡したり受け取ったりするのは非常に簡単です。クエリ パラメーターまたは動的ルーティングを通じて、ルート間でデータを渡し、それを受信側コンポーネントで処理して使用することができます。クエリ パラメーターでも動的ルーティングでも、渡されるパラメーターは $route オブジェクトを通じて取得できます。この記事が、Vue のルーティング パラメーター受け渡し関数の理解を深め、使用するのに役立つことを願っています。

以上がVue でルーティングを使用してパラメーターを渡したり受け取ったりするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。