如何在 InertiaJS 中传递参数？

Question

在设置路由并通过 Inertia 调用后，我遇到了 URL 在浏览器中如何显示的问题。

路由Route::get('/blogs/{post}', [BlogController::class, 'show']); 如果我手动输入它，来自web.php工作正常，例如localhost:3000/blogs/1 。

但是，如果我单击该按钮， <Link>将不起作用，而是将 URL 显示为http://localhost:3000/blogs/?post=1 。 有没有办法从 URL 中删除?post= ？

下面是我的 Vue 组件显示<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>

请注意，我正在关注https://inertiajs.com/links 中的文档。

Answer 1

问题是您正在传递data道具。 这将导致对象作为请求的有效负载传递。 这就是为什么它最终作为查询字符串附加到路由中的原因。

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

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