页面子组件keepAlive未生效

Question

页面子组件keepAlive未生效

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

keepAlive为true的页面,路由index.vue

<Tabs>
    <TabPane>
      <com1/>
    </TabPane>
    <TabPane>
      <com2/>
    </TabPane>
    <TabPane>
      <com3/>
    </TabPane>
</Tabs>

问题
切换index和其他页面时有缓存，
在切换tab的时候，路由会切换成index?tab=1/2/3
在页面内切换tab的时候tab之间没有缓存
目的
切换tab的时候，各tab组件之间有缓存

Answer 1

组件有渲染吗？
v-if 这么用可能会导致组件不渲染，就是v-if不生效，带来的副作用可能导致 keep-alive没有生效；
像下面这么写试一下

v-if="$route.meta.keepAlive === true"
v-else
```javascript

```