Vue -- input回车事件导致页面刷新

问题产出

最近开发遇到灵异事件，input 回车事件@keyup.enter会刷新页面，而且只有第一次的时候会触发刷新，后面如果不清缓存再进就不会触发刷新，且不仅页面会刷新，并且路由还多一个问号。

http://localhost:8080/?#/...

问题查阅

经过伟大的度娘得知原因，在当前页面元素中只有一个文本框时，触发回车事件会自动提交表单。

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作为提交表单的请求。

问题解决

Element-ui

在 el-form 标签添加 @submit.native.prevent

<el-form @submit.native.prevent>
    <el-input 
        placeholder="请输入标题" 
        v-model="search" 
        @keyup.enter.native="onSubmit"
    >
    </el-input>
</el-form>

form

添加一个input标签

<!-- 加一个隐藏的文本框 -->
<form action="#">
    <input 
        type="search" 
        placeholder="搜索" 
        class="search_input" 
        v-model="keyword" 
        @keyup.enter="searchFunc" />
    <input 
        type="text" 
        style="display:none" />
</form>