⇨ Click here for the table of contents for Laravel articles

I summarized how to use parameters with axios in Laravel × Vue.

Laravel Framework 8.83.8
Vue 2.6

It's good to think of parameters as two types

When you look at Laravel articles in the world, they often express "parameters" without distinguishing between two types.

As you get used to it, it's okay, but I think it's better to separate them without mixing them at first to understand them quickly.

① How to send query parameters

What are query parameters

Query parameters can be added to the URL's end by appending

?query=parameters here

to add query parameters.

https://laratech.jp/post/laravel-vue-axios-parameter?query=parameters here

If you want to add query parameters to the currently open page, it will look like the above.

Sending query parameters with Vue (axios) and Laravel

How to send query parameters via axios

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

Receiving and using query parameters in Laravel

Controller

public function show(Request $request)
{
    $id = $request->id; // You can receive it using request->id because it is a query parameter named id
    \Log::info($id); // Check with the logs in storage/logs/laravel.log
}

You can receive it using the Request class like this.

② How to send path parameters

What are path parameters

When reading other Laravel articles, they are sometimes referred to as path parameters or route parameters.

When written in web.php, it looks like this

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

This means that the part

{id}

becomes dynamic.

https://laratech.jp/post/1

In this way, the "1" part becomes dynamic.

Sending path parameters with Vue (axios) and Laravel

How to send path parameters via axios

const id = 1 // Assume the desired path parameter is 1
const url = `/post/${id}` // Include it in a part of the URL and send

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

Receiving and using path parameters in Laravel

Write routing in web.php or similar

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

Controller

public function show($id)
{
    \Log::info($id); // Check with the logs in storage/logs/laravel.log
}

You can use it like this.

How to choose

It's very difficult, but it's a good idea to be aware of the ease of implementation.

When dealing with search pages where parameters are added or removed, and there seem to be an infinite number of combinations, it is easier to implement using query parameters.

For pages like post details where the URL is specific, path parameters are better in my opinion.

Summary

That's all.

I hope it can be useful to someone.

For feedback or complaints, please contact via Twitter DM.

That's all!

Popular articles

Deploying a PHP7.4 + Laravel6 project to AWS EC2

Implementing breadcrumbs in Laravel with laravel-breadcrumbs