⇨ Laravel 記事の目次はこちら

Laravel × Vue での axios でパラメーターを使う方法について、まとめました。

Laravel Framework 8.83.8
Vue 2.6

パラメーターは２種類あると思って良い

世の中の Laravel の記事を見ると、パラメーターといっても２種類を区別せずに「パラメーター」と表現しています。

慣れてくると、それで構わないのですが、最初のうちはこれを混ぜずに分岐させておいた方が理解が速くなると思います。

① クエリパラメーターを送信する方法

クエリパラメーターとは

クエリパラメーターは、URL に

?query=ここにパラメーター

と末尾に付け加えることによって、クエリパラメーターを付与することができます。

https://laratech.jp/post/laravel-vue-axios-parameter?query=ここにパラメーター

今開いているページにクエリパラメーターを付与する場合は、上のようになります。

クエリパラメーターを Vue（axios)と Laravel で送信する

axios でクエリパラメーターを送信する方法

const url = "URLをここに"
const obj = {
  params: {
    id: 1, //
  },
}
axios
  .get(url, obj)
  .then(({ data }) => {
    console.log(data)
  })
  .catch(err => {
    consople.log(err)
  })

Laravel 側でクエリパラメーターを受け取って使う方法

コントローラー

public function show(Request $request)
{
    $id = $request->id; //idというクエリパラメーターなのでrequest->idで受け取れる
    \Log::info($id); //storage/logs/laravel.log ログで確認する
}

このように Request クラスを使って受け取ることができます。

② パスパラメーターを送信する方法

パスパラメーターとは

Laravel の他の記事を読むと、パスパラメーターと読んだりルートパラメーターと読んだりされています。

web.php に書くとこんな感じのものです

Route::get('/post/{id}',[PostController::class, 'show']);

これは、

{id}

の部分が動的になるという方法です。

https://laratech.jp/post/1

このように、「１」の部分が動的になります。

パスパラメーターを Vue（axios)と Laravel で送信する

axios でパスパラメーターを送信する方法

const id = 1 //使いたいパスパラメーターを１と仮定
const url = `/post/${id}` //URLの一部に入れて送る

axios
  .get(url)
  .then(({ data }) => {
    console.log(data)
  })
  .catch(err => {
    consople.log(err)
  })

Laravel 側でパスパラメーターを受け取って、使う方法

web.php などにルーティングを書く

Route::get('/post/{id}',[PostController::class, 'show']);

コントローラー

public function show($id)
{
    \Log::info($id); ////storage/logs/laravel.log ログで確認する
}

このように使うことができます。

どのように使い分けるか

非常に難しいですが、実装のしやすさは意識した方が良いと思います。

検索ページなどパラメーターを付けたり外したり、無限とおりの組み合わせがありそうなときはクエリパラメーターにした方が実装しやすいです。

投稿の詳細ページみたいに、URL が特定しているようなときはパスパラメーターで良いと思います。

まとめ

以上です。

誰かの参考になればと思います。

感想・苦情は TwitterDM にご連絡ください。

それでは！

人気記事

PHP7.4 ＋ Laravel6 のプロジェクトを AWS EC2 にデプロイする

【laravel-breadcrumbs】Laravel でパンくずリストを実装する