# 如何開啟頁面緩存 [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> ~~~