vue中的保活缓存

在开发vue项目的时候，我们经常需要在组件之间进行切换。当我们在A组件中写一些内容，或者保存一些状态，切换到其他组件时，A组件的内容就消失了，请问是什么原因呢？我们在A组件创建的生命周期中打印：created(){//eslint-disable-next-lineno-consoleconsole.log("Thecomponentre-rendered");}，然后我们在浏览器中来回切换几个组件，查看控制台：可以看到，每次组件切换时，组件都会重新渲染，所以里面的内容也会消失，那么我们将使用keep-alive来解决这个问题。keep的几种使用方式1.自定义要缓存的组件首先在App.vue中添加代码：这段代码的意思是：当被跳转的组件的$route.meta.keepAlive为真时，该组件会被加入缓存，否则不加入缓存。然后在路由中找到我们需要缓存的组件，将meta.keepAlive的值设置为truepath:'/',name:'Home',component:Home,meta:{keepAlive:true}这个时候当我们在home组件的窗体中输入123，然后点击跳转到其他组件回来，发现123依然存在，生命周期不会重印。我们也可以直接在路由守卫中设置keepAlive值：beforeRouteLeave(to,from,next){to.meta.keepAlive=true;下一个（）;}2.这样，当我们在HelloWorld和WorldHello这两个组件之间切换时，两个组件都会被缓存。注意：只能用在动态组件中，不能用静态组件，比如下面这样：