如何在InertiaJS中正确传递路由参数避免生成查询字符串

问题原因 #

Inertia 的 <Link> 组件中，data 属性在 GET 请求场景下会自动把参数转为查询参数拼接到 URL 尾部，不会自动匹配 Laravel 定义的路由路径参数{post}，这是出现?post=1的核心原因。

修复方案 #

你只需要把博客ID直接拼到href路径里，不需要用data传递路由参数即可，两种常用写法如下：

写法1：直接拼接路径

直接把ID拼入访问地址，修改<Link>代码如下：

<Link :href="`/blogs/${blog.id}`">
  <small>posted by: {{ blog.id }}</small>
  {{ blog.title }}
</Link>

写法2：用路由别名生成路径（更推荐）

如果你给路由定义了别名（在web.php中给路由加->name('blogs.show')），配合Ziggy扩展可以直接在前端调用路由函数生成路径，后续路由规则修改不需要同步改前端硬编码路径：

<Link :href="route('blogs.show', blog.id)">
  <small>posted by: {{ blog.id }}</small>
  {{ blog.title }}
</Link>

补充说明 #

如果需要传递额外不需要出现在URL里的参数，可以用method="post"配合data属性传递，这部分参数会放入请求体，不会暴露在URL中，也不会影响路由路径匹配。

内容的提问来源于stack exchange，提问作者Beaumont