在表单提交惯性未重定向到特定页面答案

【问题标题】：On Form Submit Inertia is not redirecting to particular page在表单提交惯性未重定向到特定页面
【发布时间】：2022-09-26 15:28:54
【问题描述】：

我在用着惯性（Vue3 和 Laravel 9）。我在\"中有一个表格注册.vue\“ 零件。

在提交该表格时，我正在调用控制器处理请求。一旦控制器处理了请求，我希望控制器重定向到其他组件，即 regComplete（我想显示从控制器接收到的作为道具的数据）。

现在问题是控制器将我重定向到所需的页面（虽然我无法获取道具数据但我成功获取了其他数据）但 URL 仍然与表单提交时相同。

\"注册.vue\"

<template>
        <form @submit.prevent=\"submit\">Here are the form fields i.e. email & password </form>
</template>
<script setup>
let form = reactive({
    email: \"\",
    password: \"\",
});

let submit = () =>{
    Inertia.post(\'users\',form);
}
</script>

路由.php //Route on submitting the form

Route::post(\'users\',[userController::class,\'register\']);

控制器 = 用户控制器

公共函数寄存器（请求 $request）{

// $email = $request->input(\'email\');
// $password = $request->input(\'password\');
// return \"User with\".$email.\" and with password \".$password.\" is created\"; 
return Inertia::render(\'regComplete\');}

现在我的问题是如何使用所需的道具重定向到设置页面？例如返回Inertia::render(\'regComplete\',[\'msg\'=>\'User registerd\']);

您好，您的相关页面已使用此方法处理，您将页面作为退货。但是，您需要通过 Laravel 使用 redirect->route 重定向到一个新方法。这部分是 vue 的一个独立问题。 Laravel 路线：laravel.com/docs/9.x/redirects#redirecting-named-routes
谢谢，很多使它工作。我只是在路由中给它一个名字，它工作得很好。

标签： laravel vue.js vuejs3 laravel-8 inertiajs

【解决方案1】：

成功创建新用户后，您返回组件，而不是返回或重定向到正在加载组件 (regComplete) 的另一个路由。您可以做的是添加更多处理 (regComplete) 组件的路由。

在 routes.php 上，添加新路由 /registration/complete

Route::post('users',[UserController::class,'register']);
Route::get('/registration/complete',[UserController::class,'regComplete']);

在 UserController.php 上，添加新函数 regComplete() 并更新寄存器

 // add the this function 
public function regComplete () {
  return Inertia::render('regComplete',[
     'users' => User::all()    // make sure you have defineProps()
  ]); 
}

// update your register function 
public function register(Request $request){
    
    // creation of user process here 
    
    if(successfully created) {
       return redirect('/registration/complete');
    }

    return back()->with('error','You error message here');
     
}

它可能无法解决您的问题。但是，希望它可以帮助您确定问题可能发生在哪里。

【讨论】：