vue3实现一定时间无操作跳转到登录页面

Vue 3 中可以使用 `watch` 来监听用户的操作，实现一定时间无操作后跳转到登录页面。具体的实现思路如下：

1. 定义一个计时器变量和一个定时器变量，用于记录用户最后一次操作的时间和定时器的 ID。

2. 在页面加载时，使用 `watch` 监听 `$route` 对象，当用户进行路由跳转时，将计时器重置为当前时间。

3. 定义一个函数，用于检查当前时间与计时器记录的时间差是否超过指定的时间间隔，如果超过了，则跳转到登录页面。

4. 在页面加载时启动定时器，定时检查时间间隔是否超过指定值，如果超过了则跳转到登录页面。

以下是一个简单的实现示例代码：

import { onMounted, onUnmounted, watch } from 'vue'

export default {
  setup() {
    // 定义一个计时器变量和一个定时器变量
    let lastActiveTime = new Date().getTime()
    let timer = null

    // 使用 watch 监听 $route 对象，重置计时器
    watch(
      '$route',
      () => {
        lastActiveTime = new Date().getTime()
      },
      { immediate: true }
    )

    // 定义跳转函数，用于检查时间间隔并跳转到登录页面
    function checkTimeout() {
      const now = new Date().getTime()
      const timeout = 60000 // 设定超时时间为60秒
      if (now - lastActiveTime > timeout) {
        window.location.href = 'login.html' // 跳转到登录页面
      }
    }

    onMounted(() => {
      // 启动定时器，每10秒检查一次时间间隔
      timer = setInterval(checkTimeout, 10000)
    })

    onUnmounted(() => {
      // 在组件卸载时清除定时器
      clearInterval(timer)
    })
  }
}

上述代码会在用户最后一次操作后的60秒内不断检查时间间隔，并在超时时跳转到登录页面。你可以根据需要修改超时时间和定时器的时间间隔。