vue中用户长时间无操作返回首页
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue中用户长时间无操作返回首页相关的知识,希望对你有一定的参考价值。
参考技术A 1.在data中添加如下变量。2.在mounted生命周期中添加如下事件监听器。
3.在methods中添加如下方法。
4.在watch中侦听路由变化。
5.在beforeDestory生命周期中清除定时器和事件侦听器。
Vue 页面15分钟无操作时返回首页
这种需求手机端和pc端一般是不存在的,因为都是可以手动操作刷新的。
最近在做一个户外社区大屏的项目,因为大屏是全屏显示,没法手动刷新,不可能在页面专门做一个刷新按钮,也不好看,那这样的需求就显得格外重要了。
首先我们来分析一下需求:
1.15分钟——需要定时器
2.无操作——监控页面上的点击、触摸、滑动等事件
3.返回首页——切换路由
我们只需要设置一个定时器,在一进入页面的时候就开始计时,如果15分钟内有点击、触摸、滑动等操作时就重新计时,时间一到就切换路由。
而且我们还需要新建一个空白组件rbck.vue(路由名字随意),切换时先跳转到 /rbck ,在rbck.vue里立即执行跳转到首页,达到重定向并刷新的效果。
在main.js里
配置路由
import rbck from ‘./components/rbck.vue‘
const routes = [ { path: ‘/rbck‘, meta: { title: ‘跳转页‘, scrollToTop: true }, component:rbck, } ]
created() { this.isTimeOut(); }
data() { return { timeOut: ‘‘ } },
methods: { //页面15分钟无操作时返回首页 startTimer() { let that = this; clearInterval(that.timeOut); that.timeOut = setInterval(function () { that.$router.push({path: ‘/rbck‘}) },1000*60*15) }, isTimeOut() { let that = this; if(that.$route.path == "/") { that.startTimer(); } document.body.onmouseup = that.startTimer; document.body.onmousemove = that.startTimer; document.body.onkeyup = that.startTimer; document.body.onclick = that.startTimer; document.body.ontouchend = that.startTimer; }, }
解决跳转之前路由等于跳转之后路由问题:
watch: { ‘$route‘ (to, from) { if (to.path == from.path) { this.$router.push({ path: ‘/rbck‘ }) } } },
rbck.vue代码如下:
<script type="text/ecmascript-6"> export default{ data(){ return{ } }, created () { this.backFun(); }, methods: { backFun() { this.$router.replace({path: ‘/‘}) } }, components:{ } } </script>
以上是关于vue中用户长时间无操作返回首页的主要内容,如果未能解决你的问题,请参考以下文章
(Android Studio)简单实现:双击返回键,退出应用首页