keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。

假设我们有登录，注册两个路由组件。登录组件切换到注册组件，登录组件的生命周期，从进入时的创建到离开时的销毁。当我们页面从注册组件切换回登录组件的时候。登录组件已经被销毁了，之前的数据是不会存在的。这是时候我们可以用keep-alive 来保存数据。

使用方式：在keep-alive里面放入要缓存的组件。

被keep-alive包裹的所有组件，都还不会销毁以及重新渲染。

来验证一下：

App.vue

注册组件：生成一个随机数，点击登录的时候，传递参数。

登录组件：

效果图：

第二次切换：

问题来了，这时候我们会发现，第一次和第二次传递过来的随机数是一样的。

原因是注册组件也被缓存起来了，并不会重新执行。所以传的随机数是一样的。

那有什么可以使注册组件不被缓存呢？这就需要用到include以及exclude属性

代码：

作用：路由组件所独有的两个钩子，用于捕获路由组件的激活状态。只适用于keep-alive

activated ：路由组件被激活时触发。（当进入缓存的路由组件时触发）

deactivated：路由组件失活时触发。（当离开缓存的路由组件时触发）

使用方法：

接着上面的代码，我们之缓存了Login组件，Regist组件并没有被缓存。所以现在的效果是每次切换的随机数都不一致。

第一次切换：

 第二次切换：

 上面的效果图可以看出来，虽然每次传的参数都不一样，但是登录组件一直是都是保存第一次传过来的值。这是时候如果要同步注册组件传过来的参数。就需要用到activated这个生命周期。

代码：

以上就是缓存路由组件的基本使用。