如何在 InertiaJS 中传递参数？答案

【问题标题】：How to pass the parameter in InertiaJS?如何在 InertiaJS 中传递参数？
【发布时间】：2021-12-21 02:07:59
【问题描述】：

在我设置路由并通过 Inertia 调用它后，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 的文档。

【问题讨论】：

你可以使用 Ziggy 来使用路线，命名你的路线然后使用:href="$route('posts.show', { post: 1 });"inertiajs.com/routing
@ClémentBaconnier 我尝试使用 Ziggy 但我最终搞砸了整个路由...我会再试一次（哈哈）。

标签： laravel vue.js frontend inertiajs

【解决方案1】：

问题是您传递了 data 属性。这将导致对象作为请求的有效负载传递。这就是它最终作为查询字符串附加到路由的原因。

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

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

【讨论】：