vue router自动判断左右翻页转场动画效果

<!-- keepAlList是用来动态判断组件是否需要keep-alive,建议保存到vuex中作为全局变量，至于下方的css动画，看官可以按照喜好自由修改--><transition :name="transNa"> <keep-alive :include="keepAlList"> <router-view class="child-view"></router-view> </keep-alive></transition><style scoped>.child-view { position: absolute; width: 100%; height: 100%; transition: all .5s ease; -webkit-transition: all .5s ease; -moz-transition: all .5s ease;}.rightin-enter,.leftin-leave-active { opacity: 0; transform: translate3d(50% 0, 0); -webkit-transform: translate3d(50%, 0, 0); -moz-transform: translate3d(50%, 0, 0);}.leftin-enter,.rightin-leave-active { opacity: 0; transform: translate3d(-50% 0, 0); -webkit-transform: translate3d(-50%, 0, 0); -moz-transform: translate3d(-50%, 0, 0);}</style>

//进入路由之前设置拦截器let noLoginList = ["login", "register", "forget", "home", "classify", "goodsDetial"];router.routeInfo.beforeEach((to, from, next) => { let user = sessionStorage.getItem('user'); //如果要去登录页面 if (noLoginList.indexOf(to.name) >= 0) {  if (!user || user == '') {   //未登录的状态通行   next();   return;  } else {   if (["login", "register", "forget"].indexOf(to.name) >= 0) {    //已登录的状态去首页    next({     name: 'home'    });    return;   } else {    //已登录的状态去首页    next();    return;   }  } } else {  //去登录页面以外的页面(以下是本文关键代码)  if (user && user != '') {   //判断是否为需要缓存组件,如果是添加组件名到数组   if (to.meta.keepAlive) {    const toName = to.name;    let keepLi = store.getters.getKeepAlList;    keepLi.indexOf(toName) < 0 ? keepLi.push(toName) : '';    store.commit('SET_KEEPALLIST', keepLi);   }   //根据路径名深度设置转场动画类型   store.commit('SET_TRANSNA', (to.path.split('/').length < from.path.split('/').length ? 'leftin' : 'rightin'));   next();  } else {   let toWhere = router.nameList.indexOf(to.name) >= 0 ? to : {name: 'home'};   next({    name: 'login',    params: {     jumpTo: {      name: toWhere.name,      params: toWhere.params,      query: toWhere.query,     },    }   });  } }});