Vue.jsでURLにクエリパラメータを送信する方法

ルーターを使用する方法: Vue.jsの公式ルーターパッケージであるVue Routerを使用すると、クエリパラメータを簡単に送信できます。

例えば、以下のようにルーターのqueryオプションを使用してクエリパラメータを指定できます:

this.$router.push({ path: '/example', query: { param1: 'value1', param2: 'value2' }});

この例では、/exampleというパスにparam1=value1とparam2=value2というクエリパラメータが追加されます。

$routeオブジェクトを使用する方法: $routeオブジェクトを使用して現在のURLの情報にアクセスし、クエリパラメータを送信することもできます。

例えば、以下のように$route.queryを使用してクエリパラメータを取得できます:

console.log(this.$route.query.param1); // 'value1'
console.log(this.$route.query.param2); // 'value2'

この例では、現在のURLのクエリパラメータからparam1とparam2の値を取得しています。

axiosなどのHTTPクライアントを使用する方法: Vue.jsアプリケーションでHTTPリクエストを行う場合、axiosなどのHTTPクライアントを使用してクエリパラメータをURLに追加することができます。

例えば、以下のようにaxiosを使用してGETリクエストを送信する場合、paramsオプションを使用してクエリパラメータを指定します:

axios.get('/api/example', { params: { param1: 'value1', param2: 'value2' }})
  .then(response => {
    // レスポンスの処理
  })
  .catch(error => {
    // エラーの処理
  });

この例では、/api/exampleというURLにparam1=value1とparam2=value2というクエリパラメータが追加されます。

以上が、Vue.jsでURLにクエリパラメータを送信するいくつかの方法です。必要に応じて、それぞれの方法を選択して利用してください。