Vue左右滑动入场离场动画效果，以及使用keepAlive缓存页面

1、vue代码实现代码

之前写好左右滑动入场离场动画效果后，加上keepAlive之后效果总是只有滑进的，返回 离场的没有效果。后面给keep-alive外面包一层div就好了。

• 注意：缓存页面的隐藏显示，div层要用v-show来显示隐藏（v-show不会删除节点重新渲染），keep-alive里层的router-view 再用v-if，这样能确保触发动画效果。

2、router路由层代码

meta.index 是定义路由层级，方便识别是返回离场还是前进入场。
meta.keepAlive 是用来判断页面是否需要缓存。

/**
 * 页面路由
 */

export default [{
  path: "/",
  name: "Home",
  meta: {
    index: -1,
    keepAlive: true
  },
  component: () => import("./../views/Home.vue"),
  props: true,
  children: []
},{
  path: "/About",
  name: "About",
  meta: {
    index: 0,
    keepAlive: false
  },
  component: () => import("./../views/About.vue"),
  children: []
}];

如有问题，请多多指教~