页面缓存

前端页面缓存基于 vue 的 keep-alive 机制，开始后，用于缓存页面组件，避免重复渲染，同时，也用于缓存页面数据，避免重复请求。

缓存

系统内部已经封装好如何缓存，只需要按照以下方式即可将指定页面缓存：

路由里的 meta.cache 属性设置为 true，静态路由需要手动设置，动态路由可在菜单管理页面修改此属性即可。
在页面里定义 defineOptions({ name: '路由的name属性' })
页面要保持单一根节点，如果多个根节点，又开启缓存的情况下，会造成白屏状态。单一根节点写法：

vue

<script setup lang="ts">
  
</script>

<template>
  <!-- 只有一个根节点 -->
  <div>
    <div>页面内容</div>
  </div>
</template>

不缓存

不缓存很简单，不要设置 meta.cache 属性为 true 或者不定义此属性就可以了，其他两项不需要处理。

如果设置了此属性，但又不想缓存，页面里不要定义 defineOptions({ name: 'xxx'}) 也可以。