Vue3 KeepAlive 的一些问题

[17681880207]

Vue3 KeepAlive 支持写法：

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

router.js 中配置如下，其中 page-one 中有一个按钮可以执行 $router.push({path: '/keep-alive/page-two'})，page-two 中有一个按钮可以执行 $router.back()。

{
  path: '/keep-alive',
  component: () => import('@/components/Layout/index.vue'),
  children: [
    {
      path: 'page-one',
      name: '/keep-alive/page-one',
      meta: {
        keepAlive: true
      },
      component: () => import('@/views/PageOne/index.vue')
    },
    {
      path: 'page-two',
      name: '/keep-alive/page-two',
      meta: {
        // keepAlive: true
      },
      component: () => import('@/views/PageTwo/index.vue')
    }
  ]
}

问题，只有当 page-one 和 page-tow 都设置 keepAlive 为 true 时候，page-one 才能正确的保留数据。如果只有 page-one 的 keepAlive 为 true ，而 page-two 的 keepAlive 为 false 时，从 page-tow 返回到 page-one 时，数据不会保存。请问各位大神能否帮忙解答以下~不胜感激。

[sujin190]

是不是 v-if 应该放在里边的 component 上，似乎实现的时候 keep-alive 内部一个属性保存了字组件来不销毁，v-if 在 keep-alive 上 keep-alive 都销毁重建了，那么估计保存的子组件也销毁了吧

[sujin190]

而且吧官方文档写的是用 include ，没用在上面用 v-if 的吧

[dabaoziwy]

楼上正解。

[huangzhenzhan]

```javascript
<router-view
v-slot="{ Component }"
include="lottery,home,game,prize-list,failure,error-page,verify"
>
<keep-alive>
<component
:is="Component"
v-if="$route.meta.keepAlive"
:key="$route.path"
/>
</keep-alive>
<component :is="Component" v-if="!$route.meta.keepAlive" />
</router-view>
```
貌似你少了 include 在 router-view 上

[17681880207]

@sujin190 重新试了下，v-if 应该写到 <component />上，下面的改为 <component v-if="!$route.meta.keepAlive" :is="Component"> 就可以了。确实是你所描述的那样，如果放在 <keep-alive> 上会导致 <keep-alive> 组件也销毁。非常感谢！