Vue 3 使用 root div 包裹 keep-alive 组件 - 优化页面结构

在 Vue 3 中，使用 root div 包裹 keep-alive 的方法与 Vue 2 相同，可以通过以下方式实现：

1. 在 App.vue 或根组件的模板中添加 root div：

<template>
  <div id='app'>
    <div class='root'>
      <router-view v-slot="{ Component }">
        <keep-alive>
          <component :is="Component" />
        </keep-alive>
      </router-view>
    </div>
  </div>
</template>

2. 在样式中给 root div 添加样式：

<style>
  .root {
    height: 100%;
  }
</style>

这样就可以在 Vue 3 中使用 root div 包裹 keep-alive 了。