vue3退出登录 清除keep-alive缓存

在Vue3中，如果想要在用户退出登录时清除`keep-alive`缓存，主要是因为`keep-alive`用于缓存组件的状态，以便于在路由切换时快速渲染。当用户登出时，我们通常希望所有页面都刷新，包括那些被缓存的。

你可以通过以下步骤来实现：

1. **在全局守卫中操作**：
在Vue Router的全局守卫里，比如`beforeEach`，检查用户是否已登录，如果没有登录，则跳转到登录页并清除`keep-alive`缓存。

import { useKeepAlive } from 'vue-router'
export default {
  // ...
  beforeEnter (to, from, next) {
    if (!checkUserLogin()) {
      // 清除keep-alive缓存
      const keys = useKeepAlive(to.meta.name)
      if (keys.length > 0) {
        keys.forEach((key) => Vue.prototype.$router.app.$destroy(key))
      }
      next({ name: 'login' }) // 跳转到登录页面
    } else {
      next()
    }
  },
  // ...
}

2. **在每个组件内手动清除**：
如果你只想针对特定的组件，可以在该组件的`beforeDestroy`生命周期钩子里清除缓存。

setup() {
  onBeforeDestroy(() => {
    // 清除keep-alive缓存
    this.$router.app.$destroy(this.key)
  })
  // ...
},

这里的`this.key`应该替换为你组件在`keep-alive`中设置的key值。