<!-- keepAlList是用來動態(tài)判斷組件是否需要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>

//進入路由之前設(shè)置攔截器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 == '') {   //未登錄的狀態(tài)通行   next();   return;  } else {   if (["login", "register", "forget"].indexOf(to.name) >= 0) {    //已登錄的狀態(tài)去首頁    next({     name: 'home'    });    return;   } else {    //已登錄的狀態(tài)去首頁    next();    return;   }  } } else {  //去登錄頁面以外的頁面(以下是本文關(guān)鍵代碼)  if (user && user != '') {   //判斷是否為需要緩存組件,如果是添加組件名到數(shù)組   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);   }   //根據(jù)路徑名深度設(shè)置轉(zhuǎn)場動畫類型   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,     },    }   });  } }});