Vue3 中使用 Root div 包裹 keep-alive 组件缓存内容

在 Vue 3 中，使用 Root div 包裹 keep-alive 可以通过以下步骤实现：

1. 在根组件中，添加一个 div，用于包裹所有子组件。
2. 在这个 div 中，添加一个 keep-alive 组件，并指定它的 include 属性为一个数组，包含需要缓存的组件。
3. 在每个需要缓存的组件中，添加一个 name 属性，用于在 include 数组中匹配。

以下是示例代码：

<template>
  <div>
    <keep-alive :include='['Foo', 'Bar']'>
      <router-view />
    </keep-alive>
  </div>
</template>
<script>
export default {
name: 'App',
components: {
Foo,
Bar
}
}
</script>

在这个例子中，我们在根组件中添加了一个 div，用于包裹所有子组件。在这个 div 中，我们添加了一个 keep-alive 组件，指定它的 include 属性为一个数组，包含需要缓存的组件。在每个需要缓存的组件中，我们添加了一个 name 属性，用于在 include 数组中匹配。

请注意，这只是一个示例，实际使用中需要根据具体情况进行调整。