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)聽得點擊事件
    isTimeOut() {
      var currentTime = new Date().getTime();
      // 判斷上次最后一次點擊的時間和這次點擊的時間間隔
       if (currentTime - this.lastTime > this.timeOut) {
        //這個是判斷 當(dāng)前用戶是否登錄，根據(jù)自己的情況寫
        // if (null != sessionStorage.getItem('token')) {
        this.$alert('身份驗證已過期，請重新登錄', '提示', {
          confirmButtonText: '確定',
          callback: action => {
           //這里寫路由（跳轉(zhuǎn)到登錄頁）
           this.$router.replace('/login')
          }
        });
        // }
      } else {
        // 如果在期限內(nèi)點擊，則把這次點擊的時間覆蓋掉之前存的最后一次點擊的時間
        this.lastTime = new Date().getTime()
      }
    }
  }

1.在util文件夾下創(chuàng)建一個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)建一個astrict.js，js文件內(nèi)容如下，引入的文件根據(jù)自己實際路徑
// 引入路由和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è)置超時時間: 30分鐘
window.onload = function() {
  window.document.onmousedown = function() {
    storage.setItem('lastTime', new Date().getTime())
  }
}
function checkTimeout() {
  currentTime = new Date().getTime() //更新當(dāng)前時間
  lastTime = storage.getItem('lastTime')
  console.log(lastTime)
  if (currentTime - lastTime > timeOut) {
    //判斷是否超時
    // 清除storage的數(shù)據(jù)(登陸信息和token)
    storage.clear()
    console.log(router)
    // 跳到登陸頁
    // if (router.currentRouter.name == 'login') return // 當(dāng)前已經(jīng)是登陸頁時不做跳轉(zhuǎn)
    router.push({ name: 'login' })
  }
}
export default function() {
  /* 定時器 間隔30秒檢測是否長時間未操作頁面 */
  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);
             //記錄點擊時間
             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() {
      // 使?定時器之前，要清除?下定時器
      clearInterval(this.timer);
     // 定時器
      this.timer = setInterval(() => { 
        let times = 10 * 60 * 1000;//配置的是10min 
        let lastClickTime = sessionStorage.getItem("lastClickTime") * 1; // 把上次點擊時候的字符串時間轉(zhuǎn)換成數(shù)字時間
        let nowTime = new Date().getTime(); // 獲取當(dāng)前時間
        // 當(dāng)前時間減去上次點擊時間超出配置的登出時間，就提?登錄退出
        if (nowTime - lastClickTime > times) {
          // 提??下?戶
          this.$message({ type: "warning", message: "超時了，已退出登錄" });
          // 這?要清除定時器，結(jié)束任務(wù)
          clearInterval(this.timer);
          // 最后返回到登錄頁
          this.$router.push({ path: "/login" });
        }
      }, 1000);
    },
  },
  mounted() {
    //在這執(zhí)行定時器
     this.isTimeOut()
  },
  created() {
    window.addEventListener("click",() => {
        // 為了?便，我們把點擊事件的時間直接存到sessionStorage中去，這樣?便獲取?較
        sessionStorage.setItem("lastClickTime", new Date().getTime());
      },
      //true 捕獲點擊事件
      true
    );
  },
  destroyed: function () {
     clearInterval(this.timer);
     window.removeEventListener("click", () => {}, true);
  },
};
</script>