VUE路由切换动画

利用transition标签包裹  <router-view />组件，动态的添加动画名

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

再在data里面自定义状态transitionName

 data() {
    return {
      transitionName: "",
    };

利用watch监听器监听路由状态

  watch: {
    //使用watch 监听$router的变化
    $route(to, from) {
      //如果to索引大于from索引,判断为前进状态,反之则为后退状态
      // console.log(to.meta.index, "to");
      // console.log(from.meta.index, "from");
        
      if (to.meta.index > from.meta.index) {
        //设置动画名称
        this.transitionName = "slide-left";
      } else {
        this.transitionName = "slide-right";
      }
    },
  },

在router的js文件中，给每个路由定义一个meta对象，对象中有一个index值，通过watch监听器里面的if判断index的值大小判断动画的触发左滑动或者右滑动

const routes = [{
    path: '/',
    name: 'H