vue如何判断路由的进退赋予进入和出去的动画

HTML的transition绑定name

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

监听路由的变化

watch: {
    $route(to, from) {
        // 切换动画
        let isBack = this.$router.isBack // 监听路由变化时的状态为前进还是后退
        if (isBack) {
          this.transitionName = 'slide-left'
        } else {
          this.transitionName = 'slide-right'
        }
        this.$router.isBack = false
    }
},

还有一种写法是类似生命周期的路由进入之前

beforeRouteEnter (to, from, next) {
      
    next();
},