How to pass the parameter in InertiaJS?

Question

I got a problem with how the URL appeared in the browser after I have set up a route and call it through Inertia .

The route Route::get('/blogs/{post}', [BlogController::class, 'show']); from web.php works fine if I input it manually, eg localhost:3000/blogs/1 .

However, the <Link> would not work if I click the button, instead the URL is displayed as http://localhost:3000/blogs/?post=1 . Is there anyway to remove the ?post= from the URL?

Below is my Vue component displaying the <Link>

<div class="wrapper" v-if="blogs.length">
          <div class="blog" v-for="blog in blogs" :key="blog">
            <Link href="/blogs/" :data="{post:blog.id}">
              <small>posted by: {{ blog.id }}</small>
              {{ blog.title }}
            </Link>
            <button type="button" @click="destroy($event, blog.id)">
                Delete post
            </button>
          </div>
</div>

Note that I am following the docs from https://inertiajs.com/links .

Answer 1

The problem is that you're passing the data prop. This will cause the object to be passed as the payload of the request. That's why it is ending up appended to the route as a query string.

// change this
<Link href="/blogs/" :data="{post:blog.id}">

// to this
<Link href="/blogs/your-blog-id-goes-here" >