本文已参与「新人创作礼」活动，一起开启掘金创作之路。

一. 什么是keep-alive

keep-alive是Vue提供的一个标签，用于给页面进行缓存，切换页面时让目标页面不会销毁。

二. 用途

当我们日常切换页面时，生命周期函数都会执行destroyed()销毁页面，当切换回来时，页面的内容就会变成初始化的状态，正常情况下是没问题的，但是如果遇到表单页面，用户填写了很多信息，有一个功能需要跳转到其他页面，选择一些内容，再携带内容跳转回来，之前的表单页面也会被销毁，用户填写的信息都消失了，这样用户体验也很不好，尝试过使用路由传参，vuex，虽然可以实现，但是都有些麻烦，这时候使用keep-alive标签，包裹当前页面，这样就可以让这个表单页面不被销毁，数据得以保留。

三. 使用方法

给router-view标签外层包裹keep-alive标签，使用提供的exclude和include属性，来决定哪些页面是需要添加缓存的，注意属性的value是路由页面的name值。

<keep-alive include="Detail">
   <router-view></router-view>
</keep-alive>

keep-alive还提供了两个钩子供我们进行页面的监听，因为缓存之后，生命周期就只会在第一次进入页面时执行了，所以可以通过activated和deactivated来监听页面的进入和离开；这种情况下，第一次进入页面的生命周期是 beforeRouteEnter->beforeCreate->created->beforeMount->mounted->avtivated ；第二次进入这个页面的生命周期是 beforeRouteEach --> activated

四. 一点小坑

我们设置了include的值，而且在配置路由信息时也添加了name信息，但是无效，页面还是会刷新。

{
    path: '/detail:iid',
    name: 'Detail',
    component: Detail
  }

这里直接说结论，我们需要的是在页面中设置name，而不是看路由的。