data() {
    return {
      lastTime: null,
      timeOut: 10 * 100 * 60,
    }
  },
metaInfo() {
        return {
            title: this.$store.state.settings.dynamicTitle && this.$store.state.settings.title,
            titleTemplate: title => {
                return title ? `${title} - ${process.env.VUE_APP_TITLE}` : process.env.VUE_APP_TITLE
            }
        }
  },
  created() {
    this.lastTime = new Date().getTime()
  },
methods: {
    //全局監(jiān)聽得點(diǎn)擊事件
    isTimeOut() {
      var currentTime = new Date().getTime();
      // 判斷上次最后一次點(diǎn)擊的時(shí)間和這次點(diǎn)擊的時(shí)間間隔
       if (currentTime - this.lastTime > this.timeOut) {
        //這個(gè)是判斷 當(dāng)前用戶是否登錄，根據(jù)自己的情況寫
        // if (null != sessionStorage.getItem('token')) {
        this.$alert('身份驗(yàn)證已過期，請(qǐng)重新登錄', '提示', {
          confirmButtonText: '確定',
          callback: action => {
           //這里寫路由（跳轉(zhuǎn)到登錄頁）
           this.$router.replace('/login')
          }
        });
        // }
      } else {
        // 如果在期限內(nèi)點(diǎn)擊，則把這次點(diǎn)擊的時(shí)間覆蓋掉之前存的最后一次點(diǎn)擊的時(shí)間
        this.lastTime = new Date().getTime()
      }
    }
  }

1.在util文件夾下創(chuàng)建一個(gè)storage.js封裝localStorage方法,js文件內(nèi)容如下
export default {
  setItem(key, value) {
    value = JSON.stringify(value)
    window.localStorage.setItem(key, value)
  },
  getItem(key, defaultValue) {
    let value = window.localStorage.getItem(key)
    try {
      value = JSON.parse(value)
    } catch {}
    return value || defaultValue
  },
  removeItem(key) {
    window.localStorage.removeItem(key)
  },
  clear() {
    window.localStorage.clear()
  },
}
=======================================================================
2.在util文件夾下創(chuàng)建一個(gè)astrict.js，js文件內(nèi)容如下，引入的文件根據(jù)自己實(shí)際路徑
// 引入路由和storage工具函數(shù)
import storage from '../utils/storage'
import router from '../router'  
let lastTime = new Date().getTime()
let currentTime = new Date().getTime()
let timeOut = 1 * 60 * 1000 //設(shè)置超時(shí)時(shí)間: 30分鐘
window.onload = function() {
  window.document.onmousedown = function() {
    storage.setItem('lastTime', new Date().getTime())
  }
}
function checkTimeout() {
  currentTime = new Date().getTime() //更新當(dāng)前時(shí)間
  lastTime = storage.getItem('lastTime')
  console.log(lastTime)
  if (currentTime - lastTime > timeOut) {
    //判斷是否超時(shí)
    // 清除storage的數(shù)據(jù)(登陸信息和token)
    storage.clear()
    console.log(router)
    // 跳到登陸頁
    // if (router.currentRouter.name == 'login') return // 當(dāng)前已經(jīng)是登陸頁時(shí)不做跳轉(zhuǎn)
    router.push({ name: 'login' })
  }
}
export default function() {
  /* 定時(shí)器 間隔30秒檢測(cè)是否長時(shí)間未操作頁面 */
  window.setInterval(checkTimeout, 3000)
}
=======================================================
3.在main.js引入astrict.js
import Astrict from '../src/utils/astrict.js'
Vue.use(Astrict)
另附原文地址：https://www.uoften.com/article/186408.html

<strong>sessionStorage.setItem("lastClickTime", new Date().getTime());</strong>

methods:{
      login(){
           this.$api.commn.login(this.loginForm.username, this.loginForm.password).then((result) => {   
             let res = result.data;
             let token = "Bearer " + res.token;
             this.$storage.token.set(token);
             this.$storage.user.set(res);
             //記錄點(diǎn)擊時(shí)間
             sessionStorage.setItem("lastClickTime", new Date().getTime());
          })
          .catch((error) => {
            console.log("error");
          });
       }
   }

<template>
    <div class="sidebar" style="background-color: rgb(50, 65, 87)">
      <!--左側(cè)菜單 start    *********************************************************************-->
      <el-menu
        class="sidebar-el-menu"
        :collapse="collapse"
        router=""
        :default-active="onRoutes">
        <template v-for="menu in menus">
          <template v-if="menu.subs && menu.subs.length > 0">
            <el-submenu :index="menu.id + ''">
              <template slot="title">
                <i :class="menu.icon"></i>
                <span>{{ $t(menu.name) }}</span>
              </template>
            </el-submenu>
          </template>
      </el-menu>
      <!--左側(cè)菜單 end    *********************************************************************-->
    </div>
    <div class="content-box" :class="{ 'content-collapse': collapse }">
      <v-tags></v-tags>
      <!--內(nèi)容 start    *********************************************************************-->
      <!--內(nèi)容 end    *********************************************************************-->
    </div>
</template>
<script>
export default {
  name: "home",
  data() {
    return {
      timer: null,
    };
  },
  methods: {
    isTimeOut() {
      // 使?定時(shí)器之前，要清除?下定時(shí)器
      clearInterval(this.timer);
     // 定時(shí)器
      this.timer = setInterval(() => { 
        let times = 10 * 60 * 1000;//配置的是10min 
        let lastClickTime = sessionStorage.getItem("lastClickTime") * 1; // 把上次點(diǎn)擊時(shí)候的字符串時(shí)間轉(zhuǎn)換成數(shù)字時(shí)間
        let nowTime = new Date().getTime(); // 獲取當(dāng)前時(shí)間
        // 當(dāng)前時(shí)間減去上次點(diǎn)擊時(shí)間超出配置的登出時(shí)間，就提?登錄退出
        if (nowTime - lastClickTime > times) {
          // 提??下?戶
          this.$message({ type: "warning", message: "超時(shí)了，已退出登錄" });
          // 這?要清除定時(shí)器，結(jié)束任務(wù)
          clearInterval(this.timer);
          // 最后返回到登錄頁
          this.$router.push({ path: "/login" });
        }
      }, 1000);
    },
  },
  mounted() {
    //在這執(zhí)行定時(shí)器
     this.isTimeOut()
  },
  created() {
    window.addEventListener("click",() => {
        // 為了?便，我們把點(diǎn)擊事件的時(shí)間直接存到sessionStorage中去，這樣?便獲取?較
        sessionStorage.setItem("lastClickTime", new Date().getTime());
      },
      //true 捕獲點(diǎn)擊事件
      true
    );
  },
  destroyed: function () {
     clearInterval(this.timer);
     window.removeEventListener("click", () => {}, true);
  },
};
</script>