目錄

一.了解一下KeepAlive

二.使用keep-alive標簽緩存組件

1.聲明Home頁面名稱

三.在路由出口使用keep-alive標簽

四.踩坑點1：可能需要配置路由（第三點完成后有效可忽略）

五.踩坑點2：沒有找到正確的路由出口

---

一.了解一下KeepAlive

KeepAlive | Vue.js
<KeepAlive>?是一個vue自帶的內置組件，它的功能是在多個組件間動態切換時緩存被移除的組件實例。

二.使用keep-alive標簽緩存組件

需求舉例：需要緩存Home頁面，使其在切換到其它頁面再切換回來時不用再次渲染和獲取請求

1.聲明Home頁面名稱

方法一：在頁面內另起一個不帶 setup 的script標簽

// Home.vue
// 單獨命名頁面名稱的標簽，一般不在此寫js代碼
<script lang='ts'>
export default {name: 'Home', // 在這里定義頁面名稱
};
</script>// 寫js代碼
<script setup lang='ts'></script>

方法二：使用插件

1.命令行下載：npm?install vite-plugin-vue-setup-extend -D

2.在vite.config.ts文件中引入使用：

// vite.config.ts
import VueSetupSettingExtend from 'vite-plugin-vue-setup-extend' // 引入export default defineConfig({plugins: [vue(), VueSetupSettingExtend()], // 在plugins中使用VueSetupSettingExtend()，不要修改其它內容// 其它內容
})

3.在對應頁面的script命名name：

// Home.vue
<script setup lang='ts' name="Home"></script>

三.在路由出口使用keep-alive標簽

找到路由出口router-view標簽，一般在App.vue或Layout.vue頁面，修改為：

<router-view v-slot="{ Component }"><!-- 需要緩存的組件名稱放include內，max值為最大緩存組件的數量 --><keep-alive :max="10" :include="includeData"><component :is="Component" /></keep-alive>
</router-view><script setup lang='ts'>
const includeData = ['Home'] // 設置需要緩存的組件的名稱
</script>

四.踩坑點1：可能需要配置路由（第三點完成后有效可忽略）

如到做完第三點后沒有效果，可以考慮你的項目是否需要配置路由。配置如下

// router.ts
import Home from '../views/Home.vue'; // 引入名稱與頁面名稱name一至const routes = [{path: '/',component: Layout,redirect: "/index",children: [{path: '',name: '首頁', // 這里無需為Homecomponent: Home, // 配置component值與頁面name一至meta: { sidebar: true, displayName: '首頁', cache: true },icon: 'House',},}
]

五.踩坑點2：沒有找到正確的路由出口

網上有很多教程都教人在App.vue里面的 router-view 標簽中配置 keep-alive 標簽，App.vue里面一般都有?router-view 標簽做為路由出口，但它并非一定就是需要緩存的頁面組件的路由出口。例如：我們要緩存Home.vue，有些項目會設置一個Layout.vue頁面，在這個頁面里也有 router-view 標簽作為頁面組件Home.vue的路由出口，那么此時App.vue里面 router-view 標簽就僅僅是Layout.vue頁面的路由出口，如果你在App.vue里配置了 keep-alive 標簽，那么緩存將無效，因為App.vue里面 router-view 標簽永遠不會直接訪問Home.vue，只會訪問Layout.vue，再由Layout.vue訪問Home.vue，所以要緩存Home.vue，需要在Layout.vue中使用?keep-alive 標簽。

// App.vue路由出口
<template><router-view></router-view>
</template>// Layout.vue路由出口
<router-view v-slot="{ Component }"><!-- 需要緩存的組件名稱放include內，max值為最大緩存組件的數量 --><keep-alive :max="10" :include="includeData"><component :is="Component" /></keep-alive>
</router-view>