vue项目使用keep-alive基于动态路由做缓存时，应该使用include还是exclude关键字呢？

Question

vue项目使用keep-alive基于动态路由做缓存时，应该使用include还是exclude关键字呢？

一直不太懂，如果使用include关键字，那应该如何设置组件的name值进行匹配；如果使用exclude关键字，是前端路由和组件直接写死name值吗？

Answer 1

在使用标签基于动态路由做缓存时，可以使用include和exclude关键字来配置需要缓存和不需要缓存的组件。

当使用include关键字时，只有被包含的组件才会被缓存，其他组件不会被缓存。这意味着您需要设置组件的name属性来与标签中的include值匹配。如果name值匹配成功，该组件将会被缓存。

例如，以下代码片段演示了如何使用include关键字：

<template>
  <div>
    <router-view v-slot="{ Component }">
      <keep-alive :include="cacheList">
        <component :is="Component" />
      </keep-alive>
    </router-view>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cacheList: ['Home', 'About'] // 包含需要缓存的组件的 name 属性值
    };
  }
};
</script>

在上面的代码片段中，cacheList数组中包含需要缓存的组件的name属性值，例如Home和About。只有这些组件才会被缓存，其他组件不会被缓存。

当使用exclude关键字时，被排除的组件不会被缓存，其他组件都会被缓存。在这种情况下，您需要在前端路由和组件中硬编码name属性值来匹配标签中的exclude值。

例如，以下代码片段演示了如何使用exclude关键字：

<template>
  <div>
    <router-view v-slot="{ Component }">
      <keep-alive :exclude="cacheList">
        <component :is="Component" />
      </keep-alive>
    </router-view>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cacheList: ['Home', 'About'] // 被排除的组件的 name 属性值
    };
  }
};
</script>

在上面的代码片段中，cacheList数组中包含需要排除的组件的name属性值，例如Home和About。这些组件不会被缓存，其他组件都会被缓存。

综上所述，使用include和exclude关键字的选择取决于您的实际需求和代码架构。如果您需要缓存的组件数量较少，您可以使用include关键字来缓存指定的组件。如果您需要排除的组件数量较少，您可以使用exclude关键字来排除指定的组件。