vue动态路由来生成系统菜单（二） 解决刷新空白的问题

由于子路由都是动态追加的，当界面刷新的时候，其实我们路由里面并没有该子界面的配置，所以就是404咯，也就是空白咯

在页面刷新时候，在router.beforeEach里面去判断，如果是动态路由而且是第一次加载，则动态追加该路由，再进行界面的跳转。

核心代码如下：

var dynamicRouter=null//用来获取后台拿到的路由 
var getLastUrl=(str,yourStr)=>str.slice(str.lastIndexOf(yourStr))//取到浏览器出现网址的最后"/"出现的后边的字符
//如果开始跳转
router.beforeEach(function (to, from, next) {
  // let routerCache=
 let lastUrl=getLastUrl(window.location.href,'/');
 let routerUrls=StorageUtils.getSessionItem("routerUrls");
 //如果GoingUtils.templateObj["jumpLoadFlag"]为null 则表示是界面刷新
 if(AssertUtils.isNotEmpty(routerUrls)&&!AssertUtils.isNotNull(GoingUtils.templateObj["jumpLoadFlag"])){
   if(!dynamicRouter){
     let routerUrlsAry=routerUrls.split(';');
     //如果当前连接在url中存在 则表示该跳转是需要动态加载的
     if(ArrayUtils.aryContains(routerUrlsAry,lastUrl)){
       dynamicRouter=DynamicRouterUtils.getRouterByUrl(lastUrl,UnitTabSetHomePage,router);
       next({ ...to, replace: true })
     }
   } else {
     next();
   }
 }
  //如果是配置了缓存路径的 则进行缓存 如果没有配置缓存则直接跳转
  if(routerCache.includes(to.name)||routerCache.includes(to.path)){
    to.meta.keepAlive = true;
  }else{
    to.meta.keepAlive = false;
  }
  //显示loading提醒
  store.commit('updateLoadingStatus', {isLoading: true});
  //如果是进入到login界面 相应先查询登录配置信息

  if (to.name === "login"||to.name==='loginUrl') {
    if (!store.state.vux.loginInfo) {
      //加载当前用户的登录界面设计信息
      store.dispatch($A('loadCurGroupLoginDes', "LoginStore"), {
        backFun: function () {
          store.commit('updateLoginState', {});
          next()
        }
      });
    } else {
      next()
    }
  } else {
    next();
  }
})

到此就ok了 ，完成了路由的动态追加，完成了子路由下界面刷新找不到的问题。

当然我项目代码写的比较复杂啊，因为我项目采用的是tabset方式来打开子路由界面，所以还有许多其他不相干的状态和缓存数据。