vue3 keep-alive保存当前页面数据的正确写法

1,906 阅读1分钟

vue2写的方式放到vue3不适合,否则会出现以下提示:

正确写法:

<router-view v-slot="{ Component }">
    <keep-alive>
      <component class="view" :is="Component" />
    </keep-alive>
</router-view>

如果keep-alive同一个组件如何实现状态切换?

在component加上key,key值为route.path,去判断是否需要keep-alive 来缓存组件

 <router-view v-slot="{ Component }">
    <keep-alive>
      <component :is="Component" :key="$route.fullPath" />
    </keep-alive>
 </router-view>