vue3使用keep-alive缓存组件与踩坑日记

一.了解一下KeepAlive

二.使用keep-alive标签缓存组件

1.声明Home页面名称

三.在路由出口使用keep-alive标签

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

五.踩坑点2：没有找到正确的路由出口

一.了解一下KeepAlive

KeepAlive | Vue.js
<KeepAlive> 是一个vue自带的内置组件，它的功能是在多个组件间动态切换时缓存被移除的组件实例。

二.使用keep-alive标签缓存组件

需求举例：需要缓存Home页面，使其在切换到其它页面再切换回来时不用再次渲染和获取请求

1.声明Home页面名称

方法一：在页面内另起一个不带 setup 的script标签

javascript 复制代码

// 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文件中引入使用：

javascript 复制代码

// vite.config.ts
import VueSetupSettingExtend from 'vite-plugin-vue-setup-extend' // 引入

export default defineConfig({
  plugins: [vue(), VueSetupSettingExtend()], // 在plugins中使用VueSetupSettingExtend()，不要修改其它内容
  // 其它内容
})

3.在对应页面的script命名name：

javascript 复制代码

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

</script>

三.在路由出口使用keep-alive标签

找到路由出口router-view标签，一般在App.vue或Layout.vue页面，修改为：

javascript 复制代码

<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：可能需要配置路由（第三点完成后有效可忽略）

如到做完第三点后没有效果，可以考虑你的项目是否需要配置路由。配置如下

javascript 复制代码

// router.ts
import Home from '../views/Home.vue'; // 引入名称与页面名称name一至

const routes = [
    {
        path: '/',
        component: Layout,
        redirect: "/index",
        children: [
            {
                path: '',
                name: '首页', // 这里无需为Home
                component: 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 标签。

javascript 复制代码

// 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>