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>