vue中 keep-alive+transition+router-view使用

学习vue的一周里，记录下比较实用的东西。
在使用vant组件库时，发现了List列表组件，官网文档解释的比较详细，感觉挺好用的。
后来希望可以在列表页加上一个缓存，这样来回切换页面就不需要重新刷新列表，由于我在router-view上已经套过动画标签如下：

    <transition :name="transitionName">
        <router-view />
    </transition>

再嵌套keep-alive后动画就没有了
后来发现keep-alive有两个属性, 记录一下。

include: 字符串或正则表达式。只有匹配的组件会被缓存。
exclude: 字符串或正则表达式。任何匹配的组件都不会被缓存。

<keep-alive include="test-keep-alive">
 <!-- 将缓存name为test-keep-alive的组件 -->
 <component></component>
</keep-alive>

<keep-alive include="a,b">
 <!-- 将缓存name为a或者b的组件，结合动态组件使用 -->
 <component :is="view"></component>
</keep-alive>

<!-- 使用正则表达式，需使用v-bind -->
<keep-alive :include="/a|b/">
 <component :is="view"></component>
</keep-alive>

<!-- 动态判断 -->
<keep-alive :include="includedComponents">
 <router-view></router-view>
</keep-alive>

<keep-alive exclude="test-keep-alive">
 <!-- 将不缓存name为test-keep-alive的组件 -->
 <component></component>
</keep-alive>

结合动画标签可如下描述：

   <transition :name="transitionName">
     <keep-alive include="ShouYe">
       <router-view />
     </keep-alive>
   </transition>

利用路由来分开展示