Vue3 KeepAlive 的一些问题

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

已注册用户请登录

这是一个创建于 666 天前的主题，其中的信息可能已经有所发展或是发生改变。

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 时，数据不会保存。请问各位大神能否帮忙解答以下~不胜感激。

5 条回复 • 2022-06-23 17:25:25 +08:00

sujin190

2022-06-23 16:45:32 +08:00

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

sujin190

2022-06-23 16:48:09 +08:00

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

dabaoziwy

2022-06-23 17:05:27 +08:00

楼上正解。

huangzhenzhan

2022-06-23 17:08:24 +08:00

```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

2022-06-23 17:25:25 +08:00

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