Vue 页面10分钟无操作时返回首页

这种需求手机端和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,

  }

]

　　

　　

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>