Vue3中的keep-alive路由缓存

在Vue3中的路由缓存和Vue不同，在vue2中只需要使用<keep-alive>将<router-vue/>包裹起来即可，但是在Vue3中，该方法不生效，我们需要使用作用域插槽如下：

<router-view #default="{Component}">
      <keep-alive>
        <component :is="Component" v-if="$route.meta.keepAlive" />
      </keep-alive>
      <component :is="Component" v-if="!$route.meta.keepAlive" />
    </router-view>

在App组件中，对router-view使用作用域插槽的形式，并结构出其中的Component值，然后将其放入keep-alive包裹的<component>组件上，并绑定属性is来指定渲染的组件数据。其中在router-view的数据是来自vue-router在内部注册的全局组件router-view并绑定的数据如下所示：

const component = h(ViewComponent, assign({}, routeProps, attrs, {
             onVnodeUnmounted,
             ref: viewRef,
         }));
         return (
         // pass the vnode to the slot as a prop.
         // h and <component :is="..."> both accept vnodes
         normalizeSlot(slots.default, { Component: component, route }) ||
             component);

因为我们在main.js中调用Vue.use()方法来注册路由，实际上是调用了路由的install方法，我们可以在路由的install方法中发现它定义了两个全局组件router-view和router-link，并且在router-view上面绑定了一个属性叫Component和route，值就是当前路由的组件内容，因此我们可以通过作用于插槽的方式来取得当前组件的内容并放在App.vue中的keep-alive中包裹的component中使用is属性来指定当前的组件内容来达到路由缓存的效果