[vue]vue-router 动态加载路由，可以实现，但是刷新页面就不显示了

问题描述：vue-router 动态加载路由，可以实现。但是刷新页面就不显示了，路由的数据，保存在sessionStorage中，刷新后进行了重新加载。但是组件就是不显示，测试发现，路由是添加成功的，但是就是不显示，就看到一个空白页面。

代码如下：

if (to.name === 'Login') {
    next();
  } else {
    if (to.meta.requireAuth) { // 验证用户是否登录
      if (sessionStorage.getItem('isLogin')) {
        if(store.getters.getIsLogin && store.getters.getRefresh){
          // 如果用户登录了，页面refresh值为true，则重新添加路由
          store.dispatch('setNoRefresh'); //重新刷新设置为false
          DynamicAddRouter();//添加动态路由的方法
          next()
        }else{
          next();
        }
      } else {
        next({
          path: '/login'
        })
      }
    } else {
      if(store.getters.getRefresh){
        console.log("加载动态路由")
        // 如果用户登录了，页面refresh值为true，则重新添加路由
        store.dispatch('setNoRefresh'); //重新刷新设置为false
        DynamicAddRouter();//添加动态路由的方法
        next()
      }else{
        next();
      }
    }

解决方案：动态加载路由后，将next()方法，改为next({ ...to, replace: true })
注：只将动态路由加载后的next方法，进行改变，如果全部改变，将进入到死循环

代码如下：

if (to.name === 'Login') {
  next();
} else {
  if (to.meta.requireAuth) { // 验证用户是否登录
    if (sessionStorage.getItem('isLogin')) {
      if(store.getters.getIsLogin && store.getters.getRefresh){
        // 如果用户登录了，页面refresh值为true，则重新添加路由
        store.dispatch('setNoRefresh'); //重新刷新设置为false
        DynamicAddRouter();//添加动态路由的方法
        next({ ...to, replace: true })
      }else{
        next();
      }
    } else {
      console.log(sessionStorage.getItem('isLogin'))
      next({
        path: '/login'
      })
    }
  } else {
    if(store.getters.getRefresh){
      console.log("加载动态路由")
      // 如果用户登录了，页面refresh值为true，则重新添加路由
      store.dispatch('setNoRefresh'); //重新刷新设置为false
      DynamicAddRouter();//添加动态路由的方法
      next({ ...to, replace: true })
    }else{
      next();
    }
  }

解析：replace属性为true的时候可以让链接在跳转的时候不会留下历史记录。

kuangniaokuang：动态加载如果是异步请求，会不会陷入请求的死循环？回到原帖

那你可以等待异步执行完再操作。
我是通过登录前和登录后对象路由数组的数据进行改变，登录后将获取的数据添加到路由数组中。加载动态路由时，已经请求成功了，不需要再请求了。
贴个代码给你，你可以参考哈



// 将一个数据组件成路由的形式，并返回
function createRouter(arr){
  let subRoutes=[];
  arr.forEach((item)=>{
    if (config.componentList.get(item.pathname) == "") {
      subRoutes.push({
        path: item.menuUrl,
        name: item.pathname,
        meta: {requireAuth: true,menuId:item.menuId}
      })
    } else {
      let component = config.componentList.get(item.pathname);
      subRoutes.push({
        path: item.menuUrl,
        name: item.pathname,
        meta: {requireAuth: true,menuId:item.menuId},
        component: resolve => require(["@/components/" + component + ""], resolve)
      })
    }
  });
  return subRoutes;
}
// 执行动态添加路由
function DynamicAddRouter(){
  let subRoutes=[];
  subRoutes = createRouter(store.getters.getMenuInfo);
  store.getters.getMenuInfo.forEach((item)=>{
    if(item.menuChilds.length && item.menuChilds.length>0){
      subRoutes.push(...createRouter(item.menuChilds));
    }
  });
  router.options.routes[0].children=[...subRoutes];
  router.options.routes.push(
  {
    path:'*',
      name:"404",
    component: (resolve)=> require(['@/components/Page404'],resolve)
  });
  console.log(router.options.routes);
  router.$addRoutes(router.options.routes);
}

动态加载如果是异步请求，会不会陷入请求的死循环？