Vue中点击button会刷新页面

项目测试修复bug时，发现了其中一个bug这样描述的：点击按钮时，页面会刷新

<form>
    <button @click="btnClick">
        文案。。。。
    </button>
</form>

当时我的反应时，这个还不简单，可能就是点击按钮之后有做页面重新载入的操作，可是等我去搜索时，并没有做window.location.reload的操作或路由的.replace('/')。

最后我发现是form表单中button的时间冒泡引起的，因为button本身有一个提交的事件。

解决办法

1、参考原生button说明，将button用input的方式声明调用

juejin.im/editor/draf…

2、在click时间中阻止事件冒泡

• Vue  可以用语法糖的形式 

<form>
    <button @click.prevent="btnClick">
        文案。。。。
    </button>
</form>

• 采用原生的阻止事件冒泡方式event.preventDefault() 或 event.stopPropagation()

btnClick($event) {
    $event.preventDefault()}