Vue项目点击Button页面自动刷新

已于 2022-11-23 16:51:16 修改
阅读量1k 收藏 2
点赞数 5
文章标签： vue.js javascript 前端
于 2022-11-23 16:48:11 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_64276105/article/details/128003358
版权

近写项目的时候遇到一个问题—那就是我写的登录页面输入了账号和密码一点击登录，页面刷新，刚才输入的全没了，当第二次点击的时候就成功登录，并没有页面刷新了，你说气不气？
 


我们分析一下原因 
 
我使用了原生的button按钮，而使用原生按钮需要注意的是：原生按钮button默认type='submit'这个属性值是默认具有表单提交功能的，所以在非IE浏览器下会存在点击后刷新页面的问题。
 


那么怎么解决呢？

解决方案1：在原生button按钮中更改type='button'属性值就可以了，此时它就是一个单纯的按钮了。

 
解决方案2：在绑定点击的按钮添加点击时间的时候阻止默认行为。
也就是 @click .  prevent

 

Smash249
关注
  • 5
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
vue页面刷新出现dialog弹窗
iwsish的博客
09-15 1571
奇怪的dialog弹窗
vue监听浏览器进入页面_vue禁止浏览器F5进行刷新和监听浏览器刷新事件
weixin_39646018的博客
12-20 3963
mounted() {this.haveSeek = false//先判断是否是复制的 url 进入到播放页面if (!this.$route.params.Ids && !this.$route.params.fileId) {this.$message({message:'暂未获取到视频信息，请从列表页重新打开',type:'warning'});return}//阻止F5刷新...
自动点击网页按钮
10-16
配置XML文件，填写相关控件值，启动定时器，时长可以自定义，系统将自动点击提交按钮。
button 自动刷新当前页面
weixin_30394669的博客
12-21 366
button请始终为按钮规定type属性。InternetExplorer的默认类型是"button"，而其他浏览器中（包括W3C规范）的默认值是"submit"。 取消自动刷新方式如下： <formaction="login.html"method="post"id="loginForm"onsubmit="returnfalse"><button...
Vue实现页面定时刷新
最新发布
ct5211314的博客
07-15 557
一般会遇到需要页面进行定时刷新的功能，当做看板来使用。
点击按钮刷新当前页面
weixin_45310428的博客
12-17 809
参考链接：https://www.jb51.net/article/151984.htm
做Vue项目时点击按钮页面会刷新问题
qq_63112991的博客
11-14 1183
原因：原生按钮默认的type为submit，具有提交表单的功能，当在不是IE浏览器的环境下点击时就会发生页面刷新问题。3、可以写一个input标签，把 type=“text” 改成 type=“button”2、如果使用了UI库，那么就使用它提供的按钮。
vue+elementUI表单导致页面刷新
Lifelong learning
12-09 1781
vue+elementUI表单导致页面刷新 点击按钮导致整个页面刷新，部分数据没有请求，偶尔会正常，可能和网络请求有关 解决方法：可以在 标签上添加 @submit.native.prevent 或者 给button 添加 type=“button” 属性 Internet Explorer 的默认类型是 “button”，而其他浏览器中（包括 W3C 规范）的默认值是 “submit”。 亲测两种方式均可 ...
详解vue几种主动刷新的方法总结
10-17
本文将介绍Vue中几种主动刷新的方法，这些方法可以帮助开发者在不完全重新加载页面的情况下更新视图内容。 1. window.location.reload()与this.$router.go(0)方法 window.location.reload()是JavaScript提供的一个...
vue3实现页面自动刷新
06-07
Vue3可以通过watch选项来监听数据的变化，一旦数据变化就重新加载页面，实现页面的自动刷新。以下是一个简单的示例： 1. 在Vue组件中定义需要监听的数据： ```javascript export default { data() { return { ...
html自动点击元素
08-15
html实现全自动点击元素，页面加载完成自动点击按钮等技术
Vue：button按钮的点击
谢桥的博客
12-09 2533
【代码】Vue：button按钮的点击。
Vue中解决使用button按钮的点击事件自动刷新页面的问题
小多的博客
03-28 2435
原因 button标签按钮会提交表单 button,input type=button按钮在IE和w3c，firefox浏览器区别： 1、当在IE浏览器下面时，button标签按钮，input标签type属性为button的按钮是一样的功能，不会对表单进行任何操作。 2、但是在W3C浏览器，如Firefox下就需要注意了，button标签按钮会提交表单，而input标签type属性为button不会对表单进行任何操作。 解决方法如下： 给点击事件添加 .prevent 修饰符 <button @cl
button 按钮点击刷新页面?
youthwsj的博客
02-06 313
button默认是submit，所以很多情况下点击按钮虽然啥都没写会导致页面刷新，要想利用一个button，必须使其type="button"，否则会导致页面刷新。
vue实现点击按钮刷新页面的方法:
m0_62118859的博客
04-16 7191
1.简单粗暴的刷新页面方法 //第一种：使用location对象的reload()方法 window.location.reload(); //第二种：使用编程式导航 this.$router.go(0); 2.使用vue中provide和inject
vue项目点击button按钮页面自动刷新问题总结
cabinx的博客
08-18 6941
vue项目点击button按钮页面自动刷新问题总结 1.问题背景： 最近在做的一个vue项目遇到了一个奇葩的问题，在页面中有个弹窗，在弹窗页面搜索条件后点击搜索按钮后，弹窗关闭并自动刷新了当前页面。关键是这个问题还难复现，因为它只是第一次进入页面时才会有闪退刷新页面，后面就正常，要复现这个问题每次要清除缓存且重新进入页面。 2.解决方案： 在查找资料后发现其实这个问题是我使用了原生的button按钮，而使用原生按钮需要注意的是：原生按钮button默认的type='submit'这个值时默认具有表单提
解决点击button按钮会刷新页面的问题
2301_79420857的博客
11-17 905
【代码】解决点击button按钮会刷新页面的问题。
vue项目点击按钮（或回车）页面刷新问题
m0_46814663的博客
09-25 527
今天在开发过程中遇到一个问题：当点击查询按钮时，调用查询方法后页面重新刷新，导致查询到得数据无法显示。分析问题发现，是因为使用了原生的button按钮，而使用原生按钮需要注意的是：原生按钮button默认type='submit'这个属性值是默认具有表单提交功能的，所以在非IE浏览器下会存在点击后刷新页面的问题。
form表单中的button自动刷新页面问题
leechoy
12-26 2199
form表单中的button自动刷新页面问题 form表单中如果存在button的话，有可能会出现一个问题：点击button，触发了页面的自动刷新事件。 原因是因为标签默认的类型是submit，即默认的button点击就会触发表单的提交事件。 <button></button> <!-- 两者是相当的 --> <button type="sumbit"></button> 解决的办法有三个。 1.在标签中添加属性type=“button”。 2
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值