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

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

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

再嵌套keep-alive后动画就没有了
后来发现一种写法很赞，记录一下。

<transition :name="transitionName">
<keep-alive>
<router-view v-if="$route.meta.index == 1"/>
</keep-alive>
</transition>
<transition :name="transitionName">
<router-view v-if="$route.meta.index != 1"/>
</transition>

利用路由来分开展示