登录功能第一次按下回车键刷新页面，第二次登录成功

不要睡觉哦i

已于 2022-07-14 09:59:23 修改

阅读量521

点赞数 1

文章标签：前端

于 2022-06-06 17:34:45 首次发布

本文链接：https://blog.csdn.net/SYXZSs/article/details/125150589

版权

在使用Vue-admin-template重构项目时遇到登录问题，即回车登录导致页面刷新并显示账号密码，需二次登录。问题源于form表单默认的提交行为。解决方案是在form标签上添加@submit.native.prevent修饰符，阻止表单的默认刷新行为，确保登录正常进行。此外，代码中包含了错误提示的实现。

摘要由CSDN通过智能技术生成

问题描述：

我这里是下载的花裤衩的项目模板vue-admin-template进行重构

这里自己写了登录方法后就会出现回车键登录第一次，刷新当前页面，导致的地址栏上显示账号密码，且第二次才能登录成功，再次按回车键才能登录成功。切直接点击鼠标登录能直接登录

原因：
按下enter键form表单会自动提交，form表单提交的时候会刷新页面，这里我们阻止他刷新，再绑定一下事件就可以了

解决：添加 @submit.native.prevent 就可以了

<el-form
  ref="loginForm"
  :model="loginForm"
  :rules="loginRules"
  class="login-form"
  auto-complete="on"
  label-position="left"
  @submit.native.prevent
  ...
>.......
</el-form>

@submit.native.prevent
.native ：表示对一个组件绑定系统原生事件
.prevent ：表示提交以后不刷新页面

发文助手提醒我文章质量较低。无语啊，随便加点东西让他不提示…

{
    Message({
      message: "密码错误",
      type: "error",
    });
  } else {
    Message({
      message: "登录出错",
      type: "error",
    });
  }
  {
    Message({
      message: "密码错误",
      type: "error",
    });
  } else {
    Message({
      message: "登录出错",
      type: "error",
    });
}