Form表单回车，页面被刷新问题

问题所在：是今天的上一篇随笔衍生出来的问题，一个很简单的表单,

表单样式.jpg
两个input组件，两个按钮组件，当给“昵称”项焦点的时候，按enter键，页面会被刷新，导致页面回到了首页。

解决问题：经过查资料和验证，发现问题出于当form表单中只有一个type为text的input标签时按回车键将会自动将表单提交，下面为解决方法（推荐方式一）：

• 方式一：在form中添加事件 onsubmit（推荐）

<el-form :model="form" :rules="rules" ref="form" onsubmit="return false">
  <el-form-item label="昵称" prop="name">
    <el-input v-model="form.name" autocomplete="off"></el-input>
  </el-form-item>
</el-form>

• 方式二：因为一个type为text的input导致的，那么增加一个隐藏的输入框,就保证了多个type为"text"的input框

<el-form :model="form" :rules="rules" ref="form" onsubmit="return false">
  <el-form-item label="昵称" prop="name">
    <el-input v-model="form.name" autocomplete="off"></el-input>
  </el-form-item>
  <el-form-item>
    <el-input style="display:none"></el-input>
  </el-form-item>
</el-form>

参考链接：https://blog.csdn.net/strive_or_die/article/details/102710408
（谢谢大佬）