如何在Inertia懒加载请求中传递参数？Laravel+Vue3场景

前端：传递propertyId的正确方式 #

调用router.reload时，需要将propertyId通过data字段传递给后端，同时only数组里的属性名要以字符串形式传入。修正后的代码如下：

<script setup>
import { router, usePage } from '@inertiajs/vue3';

const fetchProducts = (propertyId) => {
  router.reload({ 
    only: ['loadedProducts'],
    data: { propertyId } // 在此传递propertyId参数
  });
};
</script>

后端：接收propertyId并完成懒加载 #

Inertia的lazy回调函数无法直接获取前端参数作为函数入参，需要通过Laravel请求实例读取propertyId。同时建议增加异常处理，避免找不到对应StorageProperty时抛出错误。修正后的控制器代码：

return Inertia::render('User/ManageMachine', [
    'products' => $products,
    'loadedProducts' => Inertia::lazy(function () {
        // 从请求中获取前端传递的propertyId
        $propertyId = request()->input('propertyId');
        // 处理属性不存在的情况，返回空数组避免报错
        $property = StorageProperty::find($propertyId);
        return $property ? $property->products()->toArray() : [];
    }),
]);

核心疑问：这种实现方式是否可行？ #

完全可行。Inertia.js的懒加载（lazy props）机制就是为这类“按需加载部分数据”的场景设计的，通过router.reload指定only字段，能够只重新加载需要的懒加载属性，避免全页数据刷新，有效提升页面性能。

额外优化建议：如果想避免页面重载感，也可以用router.visit替代router.reload，同时开启状态和滚动位置保留：

const fetchProducts = (propertyId) => {
  router.visit(route('your.manage.machine.route'), {
    only: ['loadedProducts'],
    data: { propertyId },
    preserveState: true,
    preserveScroll: true
  });
};

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