vue项目第一次打开页面，第一次不能登录，第二次以后正常的问题（阻止事件默认行为、冒泡、捕获）

皓月当空hy

已于 2023-03-02 16:00:59 修改

阅读量1.3k

点赞数 1

分类专栏： vue 文章标签： vue.js javascript 前端

于 2022-11-15 16:30:45 首次发布

本文链接：https://blog.csdn.net/qq_33911541/article/details/127868178

版权

博客探讨了Vue项目首次加载时登录失败的常见问题，原因在于事件处理不当。阻止事件默认行为和调整事件冒泡与捕获顺序是关键。解决方案包括在事件处理中使用`stop`属性防止冒泡，以及利用事件捕获来改变执行顺序。通过理解DOM事件流，开发者可以优化事件处理逻辑，确保登录功能正常运行。

摘要由CSDN通过智能技术生成

this.$refs[formName].validate( async (valid) => {
  if (valid) {
    let params ={
        user_name: this.ruleForm.username,
        password: this.ruleForm.pwd
    },
    res = await LOGIN();
    if(res && res.data.status == 1){
        console.log('登录成功')
    }
})

这种提交会导致第一次打开页面时登录不成功，接口方法走到一半后就不执行了（在network中一闪而过，前端监测不到返回值），导致token没有存储到本地(localstorage)，前置路由守卫(router.beforeEach)中判断token失效后又跳回到登录页面

解决办法：

1、阻止事件的默认行为

vue：

@click.prevent

js：

<a href="http://www.baidu.com" @click.prevent='notLink'>百度</a>
<script>
a.onclick = function(e){
   alert('a');
   // 阻止浏览器默认行为
   e.preventDefault();
}
</script>

二、下面介绍