vue按enter键刷新页面 ---- 使用@submit.native.prevent阻止表单默认提交，添加在form标签上

情景描述：当使用@keyup.enter.native来使输入搜索内容后，按下enter键就触发搜索。会发现一个奇怪的现象：当按下enter键时，先是根据输入的内容搜索了一次，紧接着又全局刷新了一次页面。

原因分析：当一个表单下，如果只有一个文本框时，按下回车将会触发表单的提交事件。

原代码如下：

"true" :model="listQuery" class="demo-form-inline">
      "用户名:">
        "listQuery.username" clearable v-focus @keyup.enter.native="getList">
      
      
        "primary" @click="search">查询
      
    

解决办法：@submit.native.prevent阻止表单默认提交

.native 表示对一个组件绑定系统原生事件

.prevent 表示提交以后不刷新页面

代码如下

"true" :model="listQuery" class="demo-form-inline" @submit.native.prevent>
      "用户名:">
        "listQuery.username" clearable v-focus @keyup.enter.native="getList">
      
      
        "primary" @click="search">查询
      
    

@submit.native.prevent 阻止默认提交，添加在form标签上

@keyup.native.enter 回车操作，添加在input标签上