VUE切换页面过度动画及页面缓存问题

参考文章：Vue中切换页面时的过渡动画_zhangxu0215的专栏-CSDN博客

根据此作者写的文章修改了一些样式符合我的系统搞定了过度动画，但是会出现一些动画左右错乱的现象，原因是因为meta.index大小不一，所以应该自行根据小窗口的List进行排序即可。

watch: {
    //使用watch 监听$router的变化
    $route(to, from) {
      let toIndex = 0;
      let fromIndex = 0;
      this.$store.state.tagsView.visitedViews.forEach((item,index)=>{
        if(item.path == to.path){
          toIndex = index;
        }else if(item.path == from.path){
          fromIndex = index;
        }
      })
      //如果to的索引值为0，不添加任何动画；如果to索引大于from索引,判断为前进状态,反之则为后退状态,(原为to.meta.index)
      if (toIndex < fromIndex) {
        this.transitionName = "slide-right";
      } else {
        this.transitionName = "slide-left";
      }
    }
  },

每个系统中的小窗口列表在store都不太一样，自己查找一下哈，本人的是this.$store.state.tagsView.visitedViews。

然后是和缓存之间有冲突，如果使用v-if="$route.meta.keepAlive"，会报错，所以我们改用include的方式。

<transition :name="transitionName">
   <keep-alive include="keepAlive">
     <router-view></router-view>
   </keep-alive>
</transition>

每个需要缓存的页面加上name即可。只要有name就被缓存了

export default {
  //写此name即为开启缓存
  name:'keepAlive',
  data () {
    return {

    }
  }
}

被缓存的页面还会出现不刷新的现象，我们需要的是查询参数被缓存，但是列表需要刷新所以要用beforeRouteEnter进行操作。

  methods: {
      getInfo () {
          //列表查询接口
      }
  },
  beforeRouteEnter (to, from, next) {
    next(vm =>{
      vm.getInfo();
    });
  },
  created(){
    //不需要开始加载了，改用路由进入加载
    //this.getInfo();
  }