Vue Router 推送有效，但片刻后返回到原始组件

Posted 2023-02-22

【中文标题】Vue Router 推送有效，但片刻后返回到原始组件

【英文标题】：Vue Router push works but goes back to the original component after a moment

【发布时间】：2021-03-27 14:17:20

【问题描述】：

我的登录组件遇到了这个问题。这个想法是，在验证电子邮件和密码后，组件将更改为安全页面。但是会发生 1 或 2 秒后应用程序再次返回到 Login 组件。

这是我的第一个网络应用程序，也许我不知道如何正确搜索解决方案，但我在互联网上没有找到任何东西。

这是登录组件的代码：

<template>
    <div class="vue-template">
        <form>
            <h3>Bienvenido</h3>

            <div class="form-group">
                <label>Correo electrónico</label>
                <input type="email" class="form-control form-control-lg" v-model="user.mail"/>
            </div>

            <div class="form-group">
                <label>Contraseña</label>
                <input type="password" class="form-control form-control-lg" v-model="user.password"/>
            </div>

            <button type="submit" class="btn btn-dark btn-lg btn-block" v-on:click='auth_user()'>
                Iniciar sesión
            </button>

            <p class="forgot-password text-right mt-2 mb-4">
                <router-link to="/forgot-password">¿Olvidaste tu contraseña?</router-link>
            </p>

            <p>  response  </p>

        </form>
    </div>
</template>

<script>
    import axios from 'axios';
    
    export default 
        name: 'Login',
        data() 
            return 
                user: 
                    mail: "",
                    password: "",
                ,
                response: ""
            
        ,

        methods: 
            async auth_user()
                if(this.user.mail != "" && this.user.password != "")
                    axios( method: "POST", 
                            "url": "http://127.0.0.1:8000/user/auth/", 
                            "data": this.user, 
                            "headers":  "content-type": "application/json"
                            ).then(   
                                (result) =>                                     
                                    if (result.data == true) 
                                        this.response = "¡Hola de nuevo!";
                                        this.$router.replace('/secure');
                                     else 
                                        this.response = "Correo o contraseña incorrecta"
                                                                   
                                , 
                                (error) =>  
                                    console.error(error) 
                                                
                            )
                 else 
                    this.response = "Debe ingresar un correo y una contraseña."
                


            

        
    
</script>

如果您需要另一部分代码，请告诉我。 注意：每个组件都会出现此问题，而不仅仅是“安全”组件。

【参考方案1】：

单击按钮将提交重新加载页面的表单。您想阻止提交表单。

<form @submit.prevent>

【讨论】：

非常感谢：)