# 如何开启页面缓存 [TOC] ## 开启缓存有 3 个条件 1. 在 [src/settings/projectSetting.ts]内将`openKeepAlive` 设置为 `true` 2. 路由设置 `name`，且**不能重复** 3. 路由对应的组件加上 `name`，与路由设置的 `name` 保持一致 ```ts { ..., // name name: 'system-user', // 对应组件组件的name component: () => import('/@/views/system/user/index.vue'), ... }, // /@/views/system/user/index.vue export default defineComponent({ // 需要和路由的name一致 name:"system-user" }); ``` 5.如用户管理的访问路径为http://localhost:3100/system/user 则用户页面(index.vue的name则为system-name) >[warning] warning 注意 > keep-alive 生效的前提是：需要将路由的 `name` 属性及对应的页面的 `name` 设置成一样。因为： **include - 字符串或正则表达式，只有名称匹配的组件会被缓存** ## 如何让某个页面不缓存 **可在 router.meta 下配置** 可以将 `ignoreKeepAlive` 配置成 `true` 即可关闭缓存。 ```ts export interface RouteMeta { // 是否忽略KeepAlive缓存 ignoreKeepAlive?: boolean; } ``` ## vue3 setup语法糖如何定义页面name 一、不使用setup语法糖定义name方式 ~~~ export default defineComponent({ name: 'system-user', }); ~~~ 二、使用setup语法糖，需要加`name`属性 setup语法糖定义组件后，组件默认是没有name属性的此时就无法全局注册组件,如需定义name需按以下下方式进行定义 ~~~ <script lang="ts" setup name="system-user"> </script> ~~~