vue监听浏览器进入页面_vue 路由监听 实现浏览器前进后退动画改变

首先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";

}

}

},

动画

.slide-fade-enter-active {

/* transition: all 0.3s ease; */

transition: all 0.3s cubic-bezier(0.42, 0, 1, 1);

/* 设置进行转换的元素的背面在面对用户时是否可见：隐藏 */