router.js【路由守卫在元信息上加入时间戳】
beforeRouteEnter (to, from, next) {next(vm => {if(to.name=='root'){for (const key in routeData) {routeData[key].meta?routeData[key].meta.enterpagetimestamp=null:routeData[key].meta={enterpagetimestamp:null};}to.meta.enterpagetimestamp=Date.parse(new Date());}else{to.meta?to.meta:to.meta={}to.meta.enterpagetimestamp=to.meta.enterpagetimestamp?to.meta.enterpagetimestamp:Date.parse(new Date());}});},
app.vue
<template><div><transition :name="transitionName"><router-view></router-view></transition></div></template><script>export default {data() {return {transitionName: ''}},watch: { //使用watch 监听$router的变化$route(to, from) {//如果to索引大于from索引,判断为前进状态,反之则为后退状态if (this.$route.meta.enterpagetimestamp?this.$route.meta.enterpagetimestamp>from.meta.enterpagetimestamp:true) {//设置动画名称this.transitionName = 'slide-left';} else {this.transitionName = 'slide-right';}}}}</script><style>.slide-right-enter-active,.slide-right-leave-active,.slide-left-enter-active,.slide-left-leave-active {will-change: transform;transition: all 500ms;position: absolute;}.slide-right-enter {opacity: 0;transform: translate3d(-100%, 0, 0);}.slide-right-leave-active {opacity: 0;transform: translate3d(100%, 0, 0);}.slide-left-enter {opacity: 0;transform: translate3d(100%, 0, 0);}.slide-left-leave-active {opacity: 0;transform: translate3d(-100%, 0, 0);}</style>
