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));
  });