Laravel10+Vue3+Inertia表单提交后URL异常问题求助

问题核心原因 #

你的store控制器方法直接返回Inertia::render，会导致浏览器保留当前POST请求的URL（addressBook/store），但这个路由通常只配置了POST方法、没有GET方法，所以刷新页面时就会报错。

解决方案：重定向到GET路由 #

不要直接在store方法里渲染组件，而是重定向到通讯录创建页的GET路由，Inertia会自动处理重定向并渲染对应组件，同时浏览器URL会更新为正确的addressBook/create，刷新也不会有问题。

修改后的PHP控制器代码

public function store(StoreAddressBookRequest $request)
{
    AddressBook::create($request->all());
    // 重定向到create路由，替代直接render组件
    return redirect()->route('addressBook.create');
}

Vue组件代码无需修改

原有的表单提交逻辑保持不变即可，Inertia会自动处理重定向后的页面渲染，onSuccess回调也能正常执行：

form.post(route('addressBook.store'), {
    onSuccess: () => {modal.show(), form.reset()},
});

额外优化：传递成功提示（可选） #

如果需要在重定向后给用户显示创建成功的提示，可以用闪存数据：

return redirect()->route('addressBook.create')->with('success', '联系人创建成功');

然后在Vue组件中通过usePage获取闪存数据：

import { usePage } from '@inertiajs/vue3';

const page = usePage();

// 组件挂载或合适时机读取提示
if (page.props.flash.success) {
  // 这里可以调用你的提示组件，比如modal或Toast
}

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