Vue3+ts 的路由缓存配置（KeepAlive）

vue-router 官网中有这样一段文字

<router-view> 的 v-slot

<router-view> 暴露了一个 v-slot API，主要使用 <transition> 和 <keep-alive> 组件来包裹你的路由组件。

<Suspense>
  <template #default>
    <router-view v-slot="{ Component, route }">
      <transition :name="route.meta.transition || 'fade'" mode="out-in">
        <keep-alive>
          <component
            :is="Component"
            :key="route.meta.usePathKey ? route.path : undefined"
          />
        </keep-alive>
      </transition>
    </router-view>
  </template>
  <template #fallback> Loading... </template>
</Suspense>

如果只是这样设置就只能做到全局的缓存，当你想使用分别缓存的的话，应该这样使用：

<router-view v-slot="{ Component, route }">
            <keep-alive>
                <component :is="Component" :key="route.path" v-if="route.meta.keepAlive" />
            </keep-alive>
            <component :is="Component" :key="route.path" v-if="!route.meta.keepAlive" />
</router-view>

页面分别缓存需要配置key属性，来表示组件的唯一性和对应关系，如：:key="$route.path"

这里默认大家知道路由组件的meta的设置，这里就是利用 meta.keepalive 配置实现分别缓存