页面表单只有一个input框,触发input的回车事件后,url

问题描述:我的页面表单中除了两个按钮之外只有一个input框,在触发input框的enter事件之后,页面会刷新并且url会多一个"?"
前后url对比:
http://localhost:8082/#/test
http://localhost:8082/?#/test
问题代码如下:

<el-form inline label-width="126px" class="disFlex" size="mini">
    <el-form-item label="指标类型名称" prop="name">
        <el-input v-model="targetTypeName" placeholder="请输入指标类型名称"></el-input>
    </el-form-item>
    <el-form-item class="flex1 textAlignR">
        <el-button type="primary" @click="searchForm">查询</el-button>
        <el-button @click="resetForm">重置</el-button>
    </el-form-item>
</el-form>

解决方案:el-from 加上 @submit.native.prevent

<el-form inline label-width="126px" class="disFlex" @submit.native.prevent size="mini">
    <el-form-item label="指标类型名称" prop="name">
        <el-input v-model="targetTypeName" placeholder="请输入指标类型名称"></el-input>
    </el-form-item>
    <el-form-item class="flex1 textAlignR">
        <el-button type="primary" @click="searchForm">查询</el-button>
        <el-button @click="resetForm">重置</el-button>
    </el-form-item>
</el-form>

原因
当一个 form 元素中只有一个输入框时，在该输入框中按下回车应提交该表单。如果希望阻止这一默认行为，可以在 标签上添加 @submit.native.prevent。
参考自这里