keep-alive 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们，下面这篇文章主要给大家介绍了关于 vue 使用 keep-alive 进行组件缓存方法(组件不缓存问题解决)的相关资料，需要的朋友可以参考下

在 vue 开发过程中（单页面），有一些需求需要我们把页面状态保存下来。在切换页面时，页面不会进行重新加载。

keep-alive 主要用于保留组件状态或避免重新渲染，比如在动态组件中，为组件A和组件B分别设置了随机数编号，若在切换组件后又显示新的随机数体验极差，因此要用到 keep-alive （常见于 tab 选项卡切换，并保留相关状态数据） 一般情况下，如果不做特殊处理，会重新执行 created 和 mounted 生命周期，从而重新加载页面，默认就显示到第一页去了，就很烦。

（我的问题是，使用 keep-alive 了，但组件仍然不缓存，下面会解决）

是 Vue 提供的一个内置组件，keep-alive包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。

keep-alive 包裹的组件，其生命周期只能被执行一次，再次进入时不会被执行

keep-alive 包裹的组件，当组件在 keep-alive 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行 activated() 当 keep-alive 包含的组件被激活时调用（注：该钩子函数在服务器端渲染期间不被调用） deactivated() 当 keep-alive 包含的组件被停用时触发（注：该钩子在服务器端渲染期间不被调用）

使用 keep-alive 会将数据保留在内存中，如果要在每次进入页面的时候获取最新的数据，需要在 activated 阶段获取数据，承担原来 created 钩子函数中获取数据的任务。

keep-alive 组件有三个 props 属性：include、exclude 和 max，可以让 keep-alive 实现有条件的进行缓存。 include - 字符串或正则表达式，只有名称匹配的组件会被缓存 exclude - 字符串或正则表达式，任何名称匹配的组件都不会被缓存（优先级高于 include） max - 数字，最多可以缓存多少组件实例

参考链接：https://www.jb51.net/article/263316.htm

我写了两个组件，一个房态的，一个列表，需要动态切换。 组件切换没问题，但每次都要加载 created 和 mounted 生命周期。 （我搜索了下原因，都没用，后来又看了遍代码，突然发现问题）

原因： 主要是引入的组件，export default{ } 默认输出，忘写名字。

下面是代码分享

主页面

子页面

首先在 router 中为路由页面添加 meta 属性：

然后在App.vue中添加判断：