vue3中如何缓存路由组件

在 Vue3 中缓存路由组件，主要借助<keep-alive>组件来实现，具体方法如下：

1. 全局缓存路由组件

在 App.vue 等根组件中，直接将<router-view>包裹在<keep-alive>标签内，这样所有的路由组件都会被缓存。

<template><keep-alive><router-view></router-view></keep-alive>
</template>

2. 缓存特定路由组件

如果只想缓存部分路由组件，可通过<keep-alive>的include和exclude属性来控制。

• 使用include缓存指定组件：include接受字符串或正则表达式，代表需要缓存的组件名称。
  首先，确保每个需要缓存的路由组件都设置了name属性 ，如在Home.vue中：

  <template><!-- 组件内容 -->
  </template><script setup>
  import { defineComponent } from 'vue';
  export default defineComponent({name: 'Home' // 设置组件名称
  });
  </script>

  然后，在根组件中使用keep-alive并配置include：

  <template><keep-alive :include="['Home', 'About']"> <router-view></router-view></keep-alive>
  </template>

  这样只有Home和About这两个路由组件会被缓存。

• 使用exclude排除不缓存的组件：例如，希望除了Login组件外其他都缓存，可如下设置：

  <template><keep-alive :exclude="['Login']"> <router-view></router-view></keep-alive>
  </template>

3. 结合路由元信息（meta）动态控制缓存

在路由配置文件（如router.js）中，利用meta字段添加自定义属性，标识该路由组件是否需要缓存。

import { createRouter, createWebHistory } from 'vue-router';
const router = createRouter({history: createWebHistory(),routes: [{path: '/',name: 'Home',component: () => import('@/views/Home.vue'),meta: { keepAlive: true } // 标识该页面需要缓存},{path: '/about',name: 'About',component: () => import('@/views/About.vue'),meta: { keepAlive: false } // 标识该页面不需要缓存}]
});export default router;

在根组件中，根据meta中的keepAlive属性值动态决定是否使用keep-alive包裹：

<template><router-view v-slot="{ Component, route }"><keep-alive v-if="route.meta.keepAlive"><component :is="Component"></component></keep-alive><component :is="Component" v-else></component></router-view>
</template>

4. 处理缓存组件的生命周期

使用keep-alive缓存的组件，mounted和unmounted钩子函数不会被调用，取而代之的是activated（组件被激活时调用）和deactivated（组件失活被缓存时调用） 。例如，在需要缓存的组件中：

import { onActivated, onDeactivated } from 'vue';onActivated(() => {// 组件被激活时执行，如重新获取数据等
});onDeactivated(() => {// 组件被缓存时执行，如清理定时器等
});

5. 处理动态路由参数变化

当路由参数发生变化（例如/user/1切换到/user/2），默认缓存的组件不会重新渲染。可以通过监听$route对象的变化来手动更新组件：

import { useRoute, watch } from 'vue-router';
const route = useRoute();
watch(() => route.params,(newParams, oldParams) => {// 路由参数变化时执行，如重新请求数据},{ immediate: true }
);

6. 管理缓存状态（可选）

• 限制缓存数量：避免缓存过多页面导致内存占用过高，可以设置最大缓存数量，当超过时，清理掉最早的缓存。例如结合watch和ref来实现：

  import { ref, watch } from 'vue';
  const cachedViews = ref([]);
  const MAX_CACHE = 10; // 最大缓存数量
  watch(cachedViews, (val) => {if (val.length > MAX_CACHE) {cachedViews.value = val.slice(-MAX_CACHE);}
  });

• 缓存状态持久化：使用localStorage等存储方式保存缓存状态，在应用重启时恢复之前的缓存。

  import { onMounted, watch } from 'vue';
  const cachedViews = ref([]);
  onMounted(() => {const saved = localStorage.getItem('cachedViews');if (saved) {cachedViews.value = JSON.parse(saved);}
  });
  watch(cachedViews, (val) => {localStorage.setItem('cachedViews', JSON.stringify(val));
  });