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)简单实现:双击返回键,退出应用首页

vue返回上一页面如果没有上一页面返回首页

vue跳转页面在个别手机返回首页index问题

vue项目 首页开发 part3

vue中通过WeixinJSBridge关闭微信公众号当前页面,返回微信公众号首页

vue 返回记住滚动条位置