首先window能监听前进后退事件，但是无法得到是前进还是后退的具体逻辑，所以我们采取路由监听的方式去获取要去的页面和从哪里走的页面。

main.js

在sessionStorage里面存储to，from的队列，用于验证先后顺序

var hrefArray = [];
router.beforeEach((to, from, next) => {
    
    sessionStorage.setItem("hrefArray", hrefArray);

    next();
});

app.js

watch: {
        $route(to, from) {
            var array = sessionStorage.getItem("hrefArray").split(",");
            if (array.indexOf(to.fullPath) > array.indexOf(from.fullPath)) {
                that.slide = "slide-fade";//动画名字
            } else {
                that.slide = "fade";
            }
        }
    },

动画

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

.slide-fade-enter-active {
    /* transition: all 0.3s ease; */
    transition: all 0.3s cubic-bezier(0.42, 0, 1, 1);
    /* 设置进行转换的元素的背面在面对用户时是否可见：隐藏 */
    -webkit-backface-visibility: hidden;
}
.slide-fade-leave-active {
    transition: all 0.3s cubic-bezier(0.42, 0, 1, 1);
    /* 设置进行转换的元素的背面在面对用户时是否可见：隐藏 */
    -webkit-backface-visibility: hidden;
}
.slide-fade-enter
/* .slide-fade-leave-active for below version 2.1.8 */ {
    transform: translateX(3.75rem);
    /* opacity: 0; */
    /* 设置进行转换的元素的背面在面对用户时是否可见：隐藏 */
    -webkit-backface-visibility: hidden;
}
.slide-fade-leave {
    transform: translateX(0rem);
    /* opacity: 0; */
    /* 设置进行转换的元素的背面在面对用户时是否可见：隐藏 */
    -webkit-backface-visibility: hidden;
}
.slide-fade-leave-to {
    transform: translateX(-3.75rem);
    /* opacity: 0; */
    /* 设置进行转换的元素的背面在面对用户时是否可见：隐藏 */
    -webkit-backface-visibility: hidden;
}
.slide-fade-enter-to {
    transform: translateX(0rem);
    /* position: absolute; */
    /* opacity: 0; */
    /*设置内嵌的元素在 3D 空间如何呈现：保留3D */
    /* -webkit-transform-style: preserve-3d; */

    /* 设置进行转换的元素的背面在面对用户时是否可见：隐藏 */
    -webkit-backface-visibility: hidden;
}

/*------------------------------------------------*/
.fade-enter-active {
    /* transition: all 0.3s ease; */
    transition: all 0.3s cubic-bezier(0.42, 0, 1, 1);
    /* 设置进行转换的元素的背面在面对用户时是否可见：隐藏 */
    -webkit-backface-visibility: hidden;
}
.fade-leave-active {
    transition: all 0.3s cubic-bezier(0.42, 0, 1, 1);
    /* 设置进行转换的元素的背面在面对用户时是否可见：隐藏 */
    -webkit-backface-visibility: hidden;
}
.fade-enter
/* .slide-fade-leave-active for below version 2.1.8 */ {
    transform: translateX(-3.75rem);
    /* opacity: 0; */
    /* 设置进行转换的元素的背面在面对用户时是否可见：隐藏 */
    -webkit-backface-visibility: hidden;
}
.fade-leave {
    transform: translateX(0rem);
    /* opacity: 0; */
    /* 设置进行转换的元素的背面在面对用户时是否可见：隐藏 */
    -webkit-backface-visibility: hidden;
}
.fade-leave-to {
    transform: translateX(3.75rem);
    /* opacity: 0; */
    /* 设置进行转换的元素的背面在面对用户时是否可见：隐藏 */
    -webkit-backface-visibility: hidden;
}
.fade-enter-to {
    transform: translateX(0rem);
    /* position: absolute; */
    /* opacity: 0; */
    /*设置内嵌的元素在 3D 空间如何呈现：保留3D */
    /* -webkit-transform-style: preserve-3d; */

    /* 设置进行转换的元素的背面在面对用户时是否可见：隐藏 */
    -webkit-backface-visibility: hidden;
}