Vue3下KeepAlive缓存不起作用

Table of Contents

现象

在vue3中利用KeepAlive做缓存但是没有起到缓存的效果，切换页面还是需要重新加载

问题分析

KeepAlvie缓存的原理是通过比对路由的name和组件的name来完成的。只有两个name一致才认为匹配上，因此出现这个的问题就是没有匹配了。

路由名称

名称名称比较好确定，通常都是通过json配置好的，如下所示

{
        path: 'detail',
        component: () => import('@/views/xxx/ItemDetail.vue'),
        name: 'XXXItemDetail',
        meta: {
          hidden: true,
          title: t('详情'),
          noCache: false
        }
      }

因此路由的name可以确定为XXXItemDetail

组件的名称

组件的名称确定是有一定的优先级的。

首先默认情况下是根据文件名称自动生成的，此时组件名称为ItemDetail

通过script的进行声明

<script lang='ts'>
export default {
name:"XXX"
}
</script>

使用第三方插件 unplugin-vue-define-options
配置如下
```
defineOptions({
name: 'Foo'
})
```

通过这样的优先级来确定最终组件的名称

总结

本文遇到的问题就是没有指定name，因此组件采用文件名称自动生成导致和路由不匹配，因此没有起到缓存的作用

解决方法

知道了问题原因就可以解决问题了，目的就是使两者匹配
通过以上三种方法可以调整组件名称。

本文通过第三种方式来解决的。

其他

参考内容： https://juejin.cn/post/7171343547495350302