vue项目点击button按钮页面自动刷新问题总结
1.问题背景:
- 最近在做的一个vue项目遇到了一个奇葩的问题,在页面中有个弹窗,在弹窗页面搜索条件后点击
搜索按钮
后,弹窗关闭并自动刷新了当前页面。关键是这个问题还难复现,因为它只是第一次进入页面时才会有闪退刷新页面,后面就正常,要复现这个问题每次要清除缓存且重新进入页面。
2.解决方案:
- 在查找资料后发现其实这个问题是我使用了原生的
button
按钮,而使用原生按钮需要注意的是:原生按钮button
默认type='submit'
这个属性值是默认具有表单提交功能的,所以在非IE浏览器
下会存在点击后刷新页面的问题。 - 解决方案1:在原生
button
按钮中更改type='button'
属性值就可以了,此时它就是一个单纯
的按钮了。 - 解决方案2:可以使用
input
标签,然后再设置type='button'
也能解决。 - 解决方案3:不要将原生
button
按钮写在form
表单里面。 - 解决方案4:如果在项目中使用了第三方的
UI框架
,那么最好使用框架里面的button
按钮,也是不会出现这个问题的。