vue回车文本框，第一次会刷新页面问题

参考链接：https://blog.csdn.net/Phillip_Coulson/article/details/107838034

使用vue开发，页面文本框在点击回车时会刷新页面，而且只有第一次会触发刷新。

例子

1、打开两个功能【错误码查询】和【白名单管理】，在这个文本框输入任何字符后，回车

2、回车后页面进行了刷新，跳转 url中也多出了?

3、刷新下后置剩下一个导航栏了

 4、再次回车查询正常，不会刷新了

解决过程

 1、问题代码如下：

<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()" >
      <el-form-item>
        <el-input v-model.trim="dataForm.key" placeholder="参数" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="getDataListNew()">查询</el-button>
      </el-form-item>
</el-form>

2、点击回车按钮后不仅页面会刷新，并且路由多了一个问号

http://localhost:8001/?#

3、经查阅资料得知原因，在当前页面元素中只有一个文本框时，点击回车时会自动提交表单；

 W3C 标准中有如下规定：

When there is only one single-line text input field in a form, 
the user agent should accept Enter in that field as a request to submit the form.
当表单中只有一个单行文本输入框时，客户端应该接受该区域中的Enter作为提交表单的请求

解决方案

 在form标签中加入@submit.native.prevent阻止事件即可：

<el-form :inline="true" :model="dataForm"
         @keyup.enter.native="getDataList()" @submit.native.prevent>
      <el-form-item>
        <el-input v-model.trim="dataForm.key" placeholder="参数" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="getDataListNew()">查询</el-button>
      </el-form-item>
</el-form>