[弃用]识别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

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

监听$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%);
}
阅读 2.4k

随遇而安

27 声望
3 粉丝
0 条评论

随遇而安

27 声望
3 粉丝
文章目录
宣传栏