3分钟不响应自动跳转首页

原创已于 2024-01-10 17:20:20 修改 · 455 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#vue

于 2024-01-10 16:58:18 首次发布

vue 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何在Vue的App.vue文件中实现当页面3分钟未收到用户交互时，自动跳转到首页的功能，使用了JavaScript的setTimeout和路由管理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

3分钟不响应自动跳转首页 app.vue

<template>
  <div id="app" class="content bg" @mousedown="clickApp">
    <div class="app">
      <router-view/>
    </div>
  </div>
</template>

<script>
import router from '@/router'
export default {
  name: "App",
  data() {
    return {
      clickTime: new Date(),// 最新点击时间
      responseTime: 3 * 60 * 1000, // 3分钟不响应自动跳转首页
      timeout: null,// 点击后的定时器
    };
  },
  methods: {
    clickApp() {
      var nowTime = new Date();
      let _this = this;
      if (nowTime - this.clickTime <= this.responseTime) {
        //如果距离上次点击小于要求时间
        clearTimeout(this.timeout);
      }
      this.clickTime = nowTime; //设置点击时间为当前时间
      this.timeout = setTimeout(function () {
        //跳转首页
        console.log("1212");
        if (router.history.current.fullPath !== '/' && router.history.current.fullPath !== '/home') {
          router.push("/home")
        }
      }, this.responseTime);
    },
  },
};
</script>