我们如何处理 vuejs 中的响应？答案

【问题标题】：How can we handle the response in vuejs?我们如何处理 vuejs 中的响应？
【发布时间】：2021-02-06 07:02:23
【问题描述】：

大家好，我是 Vuejs 新手，无法获得我想要的输出。

我的任务是根据来自控制器的响应重定向用户。

如果status = success 它应该重定向到home route
如果status = failed 应该重定向到someone else route

我的登录页面：

<template>
    <div>
        <h3 class="text-center text-primary font-weight-bold" >User Login</h3>
        <div class="row">
            <div class="col-md-6">
                <form @submit.prevent="userLogin">
                    <div class="form-group">
                        <label>Username</label>
                        <input type="text" class="form-control"  v-model="userData.email">
                    </div>
                    <div class="form-group">
                        <label>Password</label>
                        <input type="text" class="form-control"  v-model="userData.password">
                    </div>
                    <button type="submit" class="btn btn-primary">Login</button>
                </form>
            </div>
        </div>
    </div>
</template>
 
<script>
    export default {

            data() {
                return {
                   userData: {}
                }
            },
            methods: {
                userLogin() {
                    this.axios
                        .post('http://localhost:8000/api/login', this.userData)
                        .then(response=> (
                            if( response.status == 'success' ){
                                     this.$router.push({ name:   'home' })
                            }
                            else {
                                this.$router.push({ name:   'login' })
                            }
                           
                        ))
                        .catch(err => console.log(err))
                        .finally(() => this.loading = false)
                }   
            } 
    }
</script>

【问题讨论】：

标签： laravel vue.js vuejs2 vuejs3

【解决方案1】：

我对 Vue js 不是很熟悉。但您可以尝试以下方法。

控制器

您可以根据以下条件动态发送路由名称

if ( Auth::attempt(array('email' => $request->email, 'password' => $request->password )) ) {
    return response()->json(['status'=>'success','message'=>'Login successfullly!', 'route'=>'home', 'blabla'=> soemData );
} else {
    return response()->json(['status'=>'fail','message'=>'username or password is invalid!', 'route'=>'login']);
}

在视图方面，您可以在方法中执行如下操作

yourFunctionName() {
    this.axios
        .post('http://url-to-controller-or-whaerve', this.userData)
        .then(response => (
            this.$router.push({ name:   response.data.route })
        ))
        .catch(err => console.log(err))
        .finally(() => this.loading = false)
}

希望对你有帮助。谢谢

【讨论】：