vue3.0 页面缓存正确打开方式

最近在做一款移动端的H5项目，如果项目中不做任何处理，类似从列表进入详情再返回这样的跳转会导致页面重新加载，试想一下如果列表已经加载了几十上百页了，就因为点进去详情再回来就要从头开始，用户碰到这种情况是不是很崩溃，所以对必要的页面做缓存就必不可少。

网上搜索缓存处理方案有很多，很多都采用Keep-alive对router-view做缓存，这样的处理方式简单又高效，在使用的过程中作为新手的我碰到了很多问题，先说下我的需求，我的需求是页面要有动画（移动端开发的我表示没有动画就相当于失去了灵魂），要么是包裹的方式不对，要么是不生效，鱼和熊掌一定都要有才行，以下是正确的打开方式

<div id="app">
    <router-view v-slot="{ Component }">
      <transition :name="transitionName">
        <keep-alive :include="includeList">
          <component :is="Component" />
        </keep-alive>
      </transition>
    </router-view>

    <Tabbar v-if="$route.meta.showTab" />
  </div>

其中includeList是定义哪些页面需要缓存的集合，这里面包含的是组件的name，一切页面皆可作为组件

const includeList = ['NewsPage', 'VideoPage', 'MinePage'];

关于组件的name如何命名，点击这里看另一篇文章。