vue项目点击button按钮页面自动刷新问题总结

vue项目点击button按钮页面自动刷新问题总结

1.问题背景：

• 最近在做的一个vue项目遇到了一个奇葩的问题，在页面中有个弹窗，在弹窗页面搜索条件后点击搜索按钮后，弹窗关闭并自动刷新了当前页面。关键是这个问题还难复现，因为它只是第一次进入页面时才会有闪退刷新页面，后面就正常，要复现这个问题每次要清除缓存且重新进入页面。

2.解决方案：

• 在查找资料后发现其实这个问题是我使用了原生的button按钮，而使用原生按钮需要注意的是：原生按钮button默认type='submit'这个属性值是默认具有表单提交功能的，所以在非IE浏览器下会存在点击后刷新页面的问题。
• 解决方案1：在原生button按钮中更改type='button'属性值就可以了，此时它就是一个单纯的按钮了。
• 解决方案2：可以使用input标签，然后再设置type='button'也能解决。
• 解决方案3：不要将原生button按钮写在form表单里面。
• 解决方案4：如果在项目中使用了第三方的UI框架，那么最好使用框架里面的button按钮，也是不会出现这个问题的。