<!-- 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,},}});}}
});