[弃用]识别vue router 前进、后退

弃用

经历不同的场景实测后发现无法达到完美识别，以下未原始文章，可做参考

方法思路

1. 每次跳转的时候，给路由全局添加一个时间戳参数
2. 监听路由变动，根据to和from的时间戳判断是前进还是后退

全局添加时间戳参数

router.beforeEach((to, from, next) => {
    if (typeof to.query._t !== "undefined") {
        next();
    } else {
        to.query._t = new Date().getTime().toString();
        next(to);
    }
});

App.vue监听路由变动

transitionName属性定义

data: function () {
    return {
        transitionName: ''
    };
}

绑定transitionName

监听$route

watch: {
    //使用watch 监听$router的变化
    $route(to, from) {
        if (parseInt(to.query._t) < parseInt(from.query._t)) {
            this.transitionName = 'slide-right';
        } else {
            this.transitionName = 'slide-left';
        }
    }
}

css

.slide-right-enter-active,
.slide-right-leave-active,
.slide-left-enter-active,
.slide-left-leave-active {
    will-change: transform;
    transition: all .3s;
    position: absolute;
    width: 100%;
    left: 0;
}

.slide-right-enter {
    transform: translateX(-100%);
}

.slide-right-leave-active {
    transform: translateX(100%);
}

.slide-left-enter {
    transform: translateX(100%);
}

.slide-left-leave-active {
    transform: translateX(-100%);
}