vue-router keep-alive

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

在vue-router中，我们使用router-view组件来显示内容时，你会发现随着页面被刷新，之前的页面并没有缓存下来，也就是哪怕是一些页面用户曾经浏览过，但当再次点击链接回到该页面时，该页面上曾经被执行过的一些状态也不会被保存。换句话说，就是一旦用户使用这个页面，该页面对应的组件就会被创建，而一旦用户离开了这个页面，该组件就会被销毁。周而复始。

想要解决这个问题，只需要：

<keep-alive>
  <router-view></router-view>
<keep-alive>

另外，还有两个生命周期函数与keep-alive密切相关，分别是activated、deactivated，这两个函数在页面处于激活状态或不是激活状态时被调用，并且这两个函数只有当页面使用了keep-alive才会生效。

keep-alive组件还有两个属性，分别是：

• include ：接受一个字符串或者是正则表达式。只有被匹配到的组件会被缓存。
• exclude ：刚好与include功能相反，用法相同。