页面缓存

⭐⭐⭐⭐⭐

由于 keep-alive 只支持同级或子级的缓存，所以标签页的切换无法做缓存，目前仅支持从列表页切换到详情页的缓存，这也是使用最多的场景。详情页中如果使用了 useForm Hooks，那么执行保存、删除都会自动清除列表页缓存，确保返回列表页后是最新的数据

示例代码：

{
  path: 'list_article',
  name: 'list_article',
  component: () => import('views/website/article/list_article.vue'),
  meta: {
    title: '文章列表',
    permission: 'list_article',
    keepAlive: ['form_article']
  }
},
{
  path: 'form_article',
  name: 'form_article',
  component: () => import('views/website/article/form_article.vue'),
  meta: {
    title: '文章详情',
    hidden: true, // 不在导航栏显示
    activeMenu: '/article/list_article', // 对应的导航栏高亮
    permission: 'form_article' // 所需权限
  }
}

WARNING

keepAlive 中指定的组件名默认为该页面的文件名，或者你也可以自定义组件名：
<script setup name='myName'>

手动清除缓存：

import { useKeepAlive } from '@/store/keepAlive'
const storeKeepAlive = useKeepAlive()
// 清除指定缓存
storeKeepAlive.remove('文件名')
// 清除全部缓存
storeKeepAlive.clean()