vue3使用keep-alive，不生效，依旧调用created,mounted问题

先描述一下我的需求，a页面在onMounted里面请求了数据，再次返回a，就会重新请求数据导致页面再次渲染，解决这个问题我需要在再次返回a页面时不走onMounted，这里就需要是哟个keep-alive实现。

首先先明确一下, 使用keep-alive需要注意层级关系

在实践过程中，keep-alive缓存组件时，往往不可以跨级使用，父子路由情况下，子路由页面需要实现缓存，父路由页面就必须配置keep-alive，我们可以通过配置之多个keep-alive实现子路由页面的缓存。

例如: 在App.vue中使用keep-alive进行缓存，只能匹配缓存根路径下的路由页面(layout)，而不能缓存他们的子孙路由页面(home，work)。若想缓存子孙路由页面，可以将整个子路由匹配name缓存，或者在子组件里嵌套使用keep-alive。

缓存成功时，除了第一次加载或者刷新会走onMounted，其他时候只会走onActivated()，onDeactivated()钩子，如果再次访问路由没有走onMounted，代表缓存生效了.

基本用法

1.app.vue 配置keep-alive (此处是vue3的配置)

template>
  <!-- vue3配置 -->
  <router-view v-slot="{ Component }">
    <keep-alive>
      <component :is="Component"  v-if="$route.meta.keepAlive"/>