vue页面form表单需要提交2次才能成功

问题描述：

在登录页面，在form表单中，为了敲击回车可以自动提交，在elementui的<el-button>控件加入了native-type="submit"属性。虽然可以实现自动提交，但是，每次都需要登录两次才行。而第一登录，从Chrome中可以看到：

现象一：

通用首部：

Request URL:   http://localhost:8081/?

Request Method:   GET

Status Code:   304 Not Modified

Remote Address:   127.0.0.1:8081

Referrer Policy:  no-referrer-when-downgrade

请求头：

If-None-Match:   W/"1b9-fU7aqr2D5VwGC4sJKu+cKWOqkEs"

响应头：

ETag:   W/"1b9-fU7aqr2D5VwGC4sJKu+cKWOqkEs"

 

我的猜测：

和缓存有些关系。

 

根据首部分析：

根据条件请求首部，If-None-Match，提供的实体标记和当前文档的实体标记相同，从而直接从本地读取缓存数据。从而导致第一次请求没有从服务器获取实体，而是使用了本地缓存的实体。

 

 

现象二：

在点击“登录”按钮，也就是提交表单之前，浏览器的url是http://localhost:8080/#/，但是第一次点击提交之后，变为http://localhost:8080/?#/，无论是否提交，正确的url应该是：http://localhost:8080/#/，这里也提示有错误。

我的猜测：

可能和服务器返回的 304状态码 有关系。

 

解决方法：

在form表单上加入 @submit.native.prevent 属性即可，如下：

<el-form :model="form" @submit.native.prevent>
  <el-form-item prop="username">
    <el-input placeholder="用户名" v-model="form.username"></el-input>
  </el-form-item>
  <!-- 其他代码 -->
</el-form>