问题

昨天线上环境出现了一个页面问题，据当事人称，他当时在这个页面停留了很久，因为吃饭去了，然后回来发现此页面按钮点不了了，除了按钮点不了外没有其他问题，按钮就跟不存在一样

页面因不好对外展示已换成其他页面

排查问题

首先负责那个页面的人觉得是缓存问题，因为据当事人说是过了很久才点不了的，复现的时候平时按钮是没有问题的可以点击有效果，因为我们一小时没有操作的话会自动退出登录，所以想着可能是登录人Redis缓存被删了导致没有权限点击按钮

这种公共点击按钮，我们是以工作流按钮控制来的，以当前登录人所在的工作节点来显示及作用

但我告诉他不是缓存问题，应该是前端的问题，因为太久没动的话会自动提示要重新登录的而不是没有按钮效果

此时，测试人员测到为什么按钮点击不了了，她切换了页面，比如说，本来在项目审批页面，然后切换到了首页，再切换回来，按钮就按不了了

当事人也说确实，当时要看其他页面的信息，就切换到了其他页面，后面吃饭回来再切换回来的

那我大概就懂问题出在哪了，我看了他页面的钩子函数，发现他用了created()函数，里面有销毁监听和获取按钮的方法，但是没有activated() 函数

解决办法

我让他加上activated() 函数再试试

activated() {this.busCreate(); //销毁监听this.initBtns(); //获取对应按钮},

created()：在创建vue对象时，当html渲染之前就触发；但是注意，全局vue.js不强制刷新或者重启时只创建一次，也就是说，created()只会触发一次；
activated()：在vue对象存活的情况下，进入当前存在activated()函数的页面时，一进入页面就触发；可用于初始化页面数据等
简单的说activated()函数就是一个页面激活后的钩子函数，一进入页面就触发

因为在created()里面调用了销毁监听和获取按钮，所以一开始进页面所有的按钮是有效果的，但是因为他切换了页面切换了路由，然后没有使用activated()调用按钮方法，所以就导致切换了路由按钮就没有效果

同事加上之后
问题解决

VUE 切换页面后点击按钮没有反应相关推荐

Vue 切换路由后页面回到页面顶部
Vue 切换路由后页面回到页面顶部 backTop() {window.scrollTo(0, 0)document.body.scrollTop = 0document.documentElemen ...
vue定时器切换页面后停止
在写个小项目,其中前端页面切换后,之前页面的定时器依然不停的往后台发请求.担心数据库的连接隐患,于是切换页面后,让定时器停止. mounted() {this.timeBatch = setInter ...
微信页面关于点击按钮关注公众号被封后的一点变通
项目jsp上遇到了这个问题,Boss要求在微信页面打开时点击按钮关注公众号.开始时使用 <ahref="weixin://profile/你的微信Id">点击关注< ...
小程序webview跳转页面后没有返回按钮完美解决方案
随着小程序越来越火爆,使一个产品如果只有公众号H5页面和APP显得不怎么完美,总感觉不搭上小程序这趟流量车,就会少了点什么,心里别扭地很.在此驱动下,我所在公司也决定赶紧上车. 但是,如果要按照小程序 ...
5秒钟之后跳转页面（点击按钮直接跳转）
文章目录前言一.5秒钟之后跳转页面(点击按钮直接跳转) 前言一些javascript的小功能的实现提示:以下是本篇文章正文内容,下面案例可供参考一.5秒钟之后跳转页面(点击按钮直接跳转) & ...
uniapp在onLaunch中使用redirectTo或reLaunch跳转页面后点击事件失效
问题描述: 使用uniapp编译成小程序时,在生命周期onLaunch中运用redirectTo或reLaunch跳转页面后点击事件失效,但是如果你重定向的页面中有使用navigator组件跳转后再返 ...
Vue进入页面后实现自动点击某个标签
功能场景: 当点击某个按钮后,地址栏上传值status,获取这个值,触发和值相对应的点击事件,从而进入$http查询出相对应的选项(代付款.代发货.待收货--). 为何不直接在控制器中接这个值,从而查 ...
Vue中实现页面上点击按钮下载文件(exe)
场景若依前后端分离版手把手教你本地搭建环境并运行项目: 若依前后端分离版手把手教你本地搭建环境并运行项目_BADAO_LIUMANG_QIZHI的博客-CSDN博客在上面搭建起来的Vue前端项目中 ...
vue中如何实现点击按钮后加载更多数据
一.点击按钮后加载更多的数据显示在 data 中,定义 pageIndex,默认为 1 ,默认展示第一页数据.定义 comments,默认为空数组,里面保存所有的评论数据,代码如下所示: data( ...

VUE 切换页面后点击按钮没有反应

问题

排查问题

解决办法

VUE 切换页面后点击按钮没有反应相关推荐

最新文章

热门文章