vue3项目使用keep-alive

1.为什么要用keep-alive

keep-alive 可以让当前页面得到缓存，举个例子：如果一个页面是表单，当你填一半数据要切换其他路由，如果没用 keep-alive 的情况下，表单数据就会丢失。

2.场景使用

3.如何使用

3.1 路由准备

3.2 视图组件准备

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

4. vue3 keep-alive 缓存原理 与 vue2 区别

【keep-alive怎样保持页面状态】
【前端面试题】Vue3中KeepAlive的实现原理
【keep-alive的作用 原理】

上一篇

Nuxt3中使用pinia并持久化

下一篇

uniapp苹果ios端免签打包带分发，转换思路玩法

史努比博客