vue结合keepAlive使用转场动画

本篇博客背景
keepAlive： vue动态组件中keepAlive中的使用，路由全局守卫，keepAlive组件量身定制的钩子。
项目中使用keepAlive可以主流程缓存优化，主流程页面（组件）切换时保持之前加载的状态，避免反复渲染影响页面性能，同时也可以很大程度上减少接口请求，减小服务器压力。
transition： 关于h5App成本低，开发快，但是体验和原生App相差太大，所以只有不断优化改善，使用vue过渡动画组件transiton进行转场动画，更贴近原生体验。

1.由于keepAlive和transition都是vue自身组件不需要安装，直接使用：

<div id="app">
    <transition :name="transitionName">
      <keep-alive>
        <router-view class="child-view" v-if="$route.meta.keepAlive" />
      </keep-alive>
    </transition>
    <transition :name="transitionName">
       <router-view class="child-view" v-if="!$route.meta.keepAlive" />
    </transition>
  </div>

$route.meta.keepAlive是判断组件路由元（即meta）中加入keepAlive的布尔值；

2.默认slide-left

data() {
    return {
      transitionName: "slide-left"
    };
  },

 watch: {
    $route(to, from) {
      const toDepth = to.path.split("/").length;
      // console.log(to.path.split("/"));
      // console.log(toDepth);
      const fromDepth = from.path.split("/").length;
      // console.log(fromDepth);
      this.transitionName = toDepth > fromDepth ? "slide-right" : "slide-left";
      // 滚动条事件处理，切换页面会保留离开页面的滚动条位置，需要清0
      document.body.scrollTop = 0;
      document.documentElement.scrollTop = 0;
      document.pageYOffset = 0;
      // if(to.meta.index){
      //   if(to.meta.index < from.meta.index){
      //     this.transitionName = "slide-right"
      //   }else {
      //     this.transitionName = "slide-left"
      //   }
      // }
    }
  }

上面通过监听路由的长度来实现转场动画（注释部分通过组件路由元里面定义的index值来实现，效果一样）

3.设置动画样式实现的css文件

.child-view {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  transition: all 0.6s cubic-bezier(0.55, 0, 0.1, 1);
}
.slide-left-enter,
.slide-right-leave-active {
  opacity: 0;
  -webkit-transform: translate(-80px, 0);
  transform: translate(-80px, 0);
}
.slide-left-leave-active,
.slide-right-enter {
  opacity: 0;
  -webkit-transform: translate(100%, 0);
  transform: translate(100%, 0);
}

4.下面就是router/index.js内容

// 中心
    {
      path: '/center',
      name: 'center',
      component: resolve => require(['@/components/center/index.vue'], resolve),
      meta:{
        keepAlive: true,
        // index: 1
      }
    },
    //中心详情
    {
      path: '/center/detail',
      name: 'detail',
      component: resolve => require(['@/components/center/detail.vue'],resolve),
      meta:{
        keepAlive: false,
        // index: 2
      }
    }

顺带上项目会报组件重复Error: Avoided redundant navigation to current location:

//解决页面报错重复路由问题
Vue.use(Router)
const originalPush = Router.prototype.push
Router.prototype.push = function push(location) {
  return originalPush.call(this, location).catch(err => err)
}

自身总结的知识点，希望都有点帮助吧！！！