更换路由时页面实现左右滑动的效果

切换路由时，页面实现左右滑动的效果(手机端使用场景比较多)；
思路： 路由meta中添加level数字，代表层级，切换路由时，如果level值变小，则右滑动，否则左滑动

0. 效果

1. 路由添加滑动标记(router.js文件配置：)

        {
            path: 'test',
            name: 'test',
            meta: {
                title: "test",
                level: 1
            },
            component: ...
        },
        {
            path: 'test2',
            name: 'test2',
            meta: {
                title: "test2",
                level: 2
            },
            component: ...
        },

2. 为路由组件包裹transition并设置滑动样式

<template>
  <div style="position:relative;">
    <transition :name="slideName">
      <router-view></router-view>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      slideName: "right"
    };
  },
  watch: {
    $route(to, from) {
      this.slideName = to.meta.level < from.meta.level ? "right" : "left";
    }
  }
};
</script>

<style lang="less">
.left-enter-active,
.left-leave-active,
.right-enter-active,
.right-leave-active {
  transition: all 2s;
  position: absolute; // 这里设置为绝对定位是防止div移动时出现滚动条
  width: 100%;
}
.left-enter,
.right-leave-to {
  opacity: 0;
  transform: translateX(100%);
}
.left-leave-to,
.right-enter {
  opacity: 0;
  transform: translateX(-100%);
}
</style>