VUE3 如何删除路由指向同一个组件的 KeepAlive 缓存?

如下图,不同路由地址指向了同一个组件VFormR, 现在问题是可以缓存了,但是现在没办法通过name去删除缓存,删的话就全删了

img

部分代码,之前用 include 把组件name加入白名单来控制添加和删除缓存的,
但是对路由指向同一个组件时 不管用了,会把全部VFormR这个组件全删了。
有什么办法可以不通过组件name来删除缓存呢

img

keep-alive 默认不支持动态销毁已缓存的组件,所以此处给出的解决方案是通过直接操控 keep-alvie 组件里的 cahce 列表,暴力移除缓存:

//使用Vue.mixin的方法拦截了路由离开事件,并在该拦截方法中实现了销毁页面缓存的功能。
Vue.mixin({
beforeRouteLeave:function(to, from, next){
if (from && from.meta.rank && to.meta.rank && from.meta.rank>to.meta.rank)
{//此处判断是如果返回上一层,你可以根据自己的业务更改此处的判断逻辑,酌情决定是否摧毁本层缓存。
if (this.$vnode && this.$vnode.data.keepAlive)
{
if (this.$vnode.parent && this.$vnode.parent.componentInstance && this.$vnode.parent.componentInstance.cache)
{
if (this.$vnode.componentOptions)
{
var key = this.$vnode.key == null
? this.$vnode.componentOptions.Ctor.cid + (this.$vnode.componentOptions.tag ? ::${this.$vnode.componentOptions.tag} : '')
: this.$vnode.key;
var cache = this.$vnode.parent.componentInstance.cache;
var keys = this.$vnode.parent.componentInstance.keys;
if (cache[key])
{
if (keys.length) {
var index = keys.indexOf(key);
if (index > -1) {
keys.splice(index, 1);
}
}
delete cache[key];
}
}
}
}
this.$destroy();
}
next();
},
});

img

试试获取它的实例,然后销毁呢

删除缓存是不是因为在共用同一组件的时候,切换页面不刷新页面啊,要是这样的话可以看下这里https://www.bilibili.com/video/BV1Ga411u776?spm_id_from=333.999.0.0

这样貌似可以解决:
大致思路:
新建一个JSX文件来动态创建一个新的组件,并设置唯一name
然后再路由配置里 遇到共用组件时则创建该组件。
最后就可以通过 keep-alive 的 include 白名单来控制 添加和删除缓存了。

测试了下 ,暂时没发现什么问题。

```javascript
// 新建的JXS文件 
//新建个方法 动态创建组件
export const createComp = function (name) {
  return {
    name: name, //唯一组件名
    components: {
      vFormR //注册路由指向共用的组件
    },
    render(h) {
      return (
        <vFormR></vFormR>
      )
    }
  }
}
//路由配置文件
//路由配置
var route = {
            path: item.path,
            name: item.name,
            meta: item.meta,
            redirect: item.redirect,
            component:() => {//主要代码
            if (条件:遇到共用组件时) {
                return createComp(name); //动态创建新的组件,并设置组件唯一名称
            } else {//非共用组件
                return import(
                    /* webpackChunkName: "[request]" */ `@/views/${component}`
                );
            }
        };
        };

```