如何在InertiaJS中传递参数？

Question

在我设置了一个路由并通过惯性调用它之后，我遇到了一个问题，URL在浏览器中的显示方式。

如果我手动输入，来自web.php的路由Route::get('/blogs/{post}', [BlogController::class, 'show']);工作正常，例如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" >