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按钮,也是不会出现这个问题的。
    原文作者:木屋x
    原文地址: https://blog.csdn.net/qq_34917408/article/details/108072606
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞