利用addRoutes添加动态路由，刷新页面跳转404或者空白页

刷新页面时跳转404或者空白页，我的原因是刷新页面后动态添加的路由表信息丢失，我在获取到后存在了sessionStorage中，但在刷新后还是丢失，
解决办法：在判断页面是刷新时，重新拉取数据

路由表信息

path: '/Dep',
    name: 'Dep',
    icon: 'el-icon-location',
    component: Layout,
    redirect: '/department', 
    meta: {
      requireAuth: true,
      showMenu: true,
      title: '部门管理',
    },
    children: [{
      path: '/department',
      name: 'Department',
       icon: 'el-icon-s-promotion',
       component: () => import('@/views/personnel/department.vue'),
       meta: {
         requireAuth: true,
        showMenu: true,
        title: '部门管理',
      }
    }]
   },

路由

router.beforeEach((to, from, next) => {
  if (to.meta.requireAuth) { // 判断该路由是否需要登录权限 requireAuth参数必须存在
    if (sessionStorage.getItem("token")) { // 判断本地是否存在token
      //已登录 有token 放行
     
      //这里判断是否拉取了菜单，如果没有这一步，控制台会一直报路由重复，按理说这里应该是根据后台返回值来判断，但我这里貌似没看到，就自己在vuex中存了一组数据，isDept ：false；
 if(store.state.isDept == true ){ next(); return }//等于true就说明拉取了菜单
 //利用vuex中的方法，处理后台传过来的数据，拼接成标准路由格式
  store.
dispatch("getDynamicRouter",JSON.parse(sessionStorage.getItem('permissionList')))
.then(res => {
          //进行路由拼接，并进行路由动态加入 ！！注意addroutes方法不可缺
          store.dispatch("getDiyRouter").then(res => {
          //动态添加路由
            router.addRoutes(store.state.routeList)
            //添加完成后，让.isDept变成true，说明拉取了菜单，再进行页面跳转时就不会重新拉取路由列表了，
            store.state.isDept = true;
            //添加完成后，一定要进行next()，不然会进行死循环
            next()
          });
        });

    } else {
      // 未登录,跳转到登陆页面
      next({
        path: '/login'
      })
    }
  } else {
    //无需登录权限页面控制
    if (to.name == null) {
    //这里是页面刷新的时候，重新拉取路由数据，方法同上
      if (window.performance.navigation.type == 1) {
        if(store.state.isDept == true){ next(); return }
        store.dispatch("getDynamicRouter",   JSON.parse(sessionStorage.getItem('permissionList')))
        .then(res => {
          store.dispatch("getDiyRouter").then(res => {
            store.state.isDept = true;
            router.addRoutes(store.state.routeList)
            //唯一的区别在这里，
            next({...to, replace: true})
            
          });
        });

        
      } else {
        next({
          path: '/404'
        })
      }


    } else {
      next();
    }
  }
});