Laravel×Vueでパラメーターをaxiosで送信する方法
いつもご利用ありがとうございます。このブログは、広告費によって運営されています。
Laravel × Vue での axios でパラメーターを使う方法について、まとめました。
Laravel Framework 8.83.8
Vue 2.6パラメーターは２種類あると思って良い
世の中の Laravel の記事を見ると、パラメーターといっても２種類を区別せずに「パラメーター」と表現しています。
慣れてくると、それで構わないのですが、最初のうちはこれを混ぜずに分岐させておいた方が理解が速くなると思います。
① クエリパラメーターを送信する方法
クエリパラメーターとは
クエリパラメーターは、URL に
?query=ここにパラメーターと末尾に付け加えることによって、クエリパラメーターを付与することができます。
https://poppotennis.com/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://poppotennis.com/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 にご連絡ください。
それでは！
人気記事
