vue3路由监听清除缓存

根据提供的引用内容，可以看出这是一个Vue.js的路由缓存管理的问题。在Vue.js中，可以通过keep-alive组件来实现路由缓存。而在路由缓存管理中，可以通过监听缓存列表的变化来判断是否需要销毁缓存实例。具体实现可以参考以下步骤：

1. 在Vue组件中引入mapState方法，将vuex中的keepAliveList映射到computed计算属性中。

2. 监听keepAliveList的变化，如果缓存列表中没有当前的路由或组件，则在缓存中销毁该实例。

3. 在销毁缓存实例时，可以采用两种方式：$destroy方法和include方法。其中，$destroy方法是摧毁树的节点，而include方法则是通过匹配路由名称来销毁缓存实例。

4. 如果采用$destroy方法无法销毁缓存实例，可以尝试使用include方法。

代码示例：

<template>
  <keep-alive :include="keepAliveList">
    <router-view></router-view>
  </keep-alive>
</template>

<script>
import { mapState } from 'vuex'

export default {
  computed: {
    ...mapState({
      keepAliveList: state => state.utils.keepAliveList,
    }),
  },
  watch: {
    keepAliveList(e) {
      let name = this.$options.name;
      if (e.indexOf(name) < 0) {
        this.$destroy();
      }
    },
  },
}
</script>