记录vue3 keep-alive 与 vue-router 路由缓存问题

接手之前的项目后发现项目在路由之间切换不会对之前的路由进行缓存，导致每次切回页面时会重新请求，导致页面呈现加载中的状态。

目前解决方案：

// router.js
const router = createRouter({
  ...,
  routes: [
    ...,
    {
      ...,
      meta: { keepAlive: true },
    },
  ],
});

      <RouterView v-slot="{ Component }" >
        <KeepAlive>
          <component v-if="$route.meta.keepAlive" :is="Component"></component>
        </KeepAlive>
          <component v-if="!$route.meta.keepAlive" :is="Component"></component>
      </RouterView>