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";
      // 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)
}

自身總結的知識點，希望都有點幫助吧！！！