vue-router中的keep-alive组件

vue-router中keepalive缓存的知识补充

1. 这个keep-alive是vue内置的一个组件，如果你希望一些组件不被反复的被渲染刷新，就可以使用<keep-alive></keep-alive>将组件包裹起来，被包裹起来的组件会被缓存起来，保存这个组件的状态，当你再次访问该组件，会直接从缓存中读取内容，该组件不会被重新渲染。

   //keepalive包含的组件会被进行缓存
   <keep-alive>
     <component />
   </keep-alive>
   

2. 要是我们希望某些组件不被缓存，有些被缓存呢？

   这里用到了几个属性来解决：

   • include：包含组件

   • exclude：排除的组件

   • max：缓存组件最大值

     对组件的缓存：

     //只缓存组件name为a或者b的组件
     <keep-alive include="a,b">
      <component :is="currentView"/>
     </keep-alive>
     
     //组件名为c的组件不缓存
     <keep-alive exclude="c">
      <component :is="currentView"/>
     </keep-alive>
     
     // 如果同时使用include,exclude,那么exclude优先于include， 下面的例子也就是只缓存a组件
     <keep-alive include="a,b" exclude="b">
      <component :is="currentView"/>
     </keep-alive>
     
     // 如果缓存的组件超过了max设定的值5，那么将删除第一个缓存的组件
     <keep-alive exclude="c" max="5">
      <component :is="currentView"/>
     <