在 javascript 代码中重定向惯性 js 和 jetstream

Question

我想在创建问题后被重定向到单个问题页面

summitQuestion(){
    this.question_button = true
    axios.post('/api/question/ask', {
        'title' : this.question.title,
        'body' : this.question.body,
        'tags' : this.tags,
        'user_id' : this.$page.props.user.id
    }).then(response=>{
        this.question_button = false
        console.log(response.data)


    }).catch(error=>{
        this.question_button = false
        console.log(error.response.data.errors)

        if(error.response.data.errors){
            this.title_errors = error.response.data.errors.title
            this.body_errors = error.response.data.errors.body
        }


    })
},

我有这个功能我想要在请求成功后重定向我一个 spa 方式没有页面重新加载到问题单页我正在使用惯性 js 和 jetstream 我的 laravel 路由器在下面

Route::middleware(['auth:sanctum', 'verified'])->get('/question/{question}', 'App\Http\Controllers\QuestionController@show')->name('question-single');

Answer 1

如果您使用的是 Inertia，则应该创建一个带有链接到字段的 v-model 的表单。添加一个调用您的方法的提交类型的按钮（参见下面的方法示例）。

<form @submit.prevent="submitQuestion">
    <input type="text" v-model="form.title">
    <button type="submit"></button>
</form>

<script>
    export default {
        data() {
          return {
            form: this.$inertia.form({
              title: this.question.title,
              body: this.question.body,
              tags: this.tags,
              user_id: this.$page.props.user.id,
            }, {
              bag: 'default',
            }),
          }
        },
        methods: {
          summitQuestion: function() {
            this.form.post('/api/question/ask');
          },
        }
    };
</script>

重定向可以直接在您的控制器方法上完成。

class QuestionController extends Controller
{
    public function create(Request $request) {
        // Create your question
        return redirect()->route('your.route');
    }
}

Answer 2

如下图惯性使用访问方法即可

this.$inertia.visit(route('question-single'), { method: 'get' });

如果您从上面的代码中得到的一切都是正确的，并且在没有重新加载页面的情况下保留了重定向，那么我想您的代码的修改将是以下示例；

summitQuestion(){
this.question_button = true
axios.post('/api/question/ask', {
    'title' : this.question.title,
    'body' : this.question.body,
    'tags' : this.tags,
    'user_id' : this.$page.props.user.id
}).then(response=>{
    this.question_button = false
    // console.log(response.data)
    this.$inertia.visit(route('question-single'), { method: 'get', data: response.data });


}).catch(error=>{
    this.question_button = false
    console.log(error.response.data.errors)

    if(error.response.data.errors){
        this.title_errors = error.response.data.errors.title
        this.body_errors = error.response.data.errors.body
    }


})

},

您可以通过访问 The Official Inertiajs Website

来参考此内容

在 javascript 代码中重定向惯性 js 和 jetstream

Redirect in inertia js and jetstream in javascript code

inertiajs

laravel

vue.js

jetstream