最近在用最新技术开发一个开源后台前端开发框架时,遇到一个多Tab页怎么缓存的问题,
在使用<script setup>时,vue会默认使用文件名作为组件名
这样就会出现大量重名情况,有时候统一命名为 index.vue 就会有一堆的 index
如果想使用 keep-alive 缓存组件,比如在后台管理页面,实现多Tab页签缓存时,重名会导致“误杀”
比如我设置了/system/user/index.vue页面缓存,结果/system/role/index.vue页面也会被缓存,因为他们的组件名都是 index,keep-alive 缓存规则只认组件名 - -!怎么办呢?
使用 defineOptions 给每个组件命名?
<script setup>
defineOptions({
name: 'xxxx'
})
</script>
这样太麻烦,而且也没法避免重名
能不能修改 vue 的取名规则?不要以文件名来取名?
目前我想到的方案是,在从接口读取到菜单生成路由时,对组件的懒加载方法做下手脚
将组件名改为 路径+文件名 的形式,这样组件名就变成路径了,如字典页: /views/modules/system/dict/dict-page
看似就解决了组件名重名导致缓存“误杀”的问题,精确缓存指定页面。