vue动态路由如何解决addRoutes()之后立即访问被添加的路由会白屏的问题

想请问一下大家，我在处理vue的动态路由刷新白屏的问题时，通过在beforeEach中用router.addRoutes()再次添加动态路由信息来解决，但是为什么我将router.addRoutes()放在setTimeout()和Promise.then()等异步操作中能避免addRoutes()之后立即访问被添加的路由会白屏的问题，而且此时，beforeEach会触发两次。但是直接执行addRoutes()就会出现白屏。

router.beforeEach((to, from, next) => {
  if(to.meta.requireAuth === false || whiteList.indexOf(to.path) !== -1){ // 白名单或不需要登录
     next()
  }else{
    if(from.path === '/' ){ //刷新操作
      let routes = []
      Menufilter([], routes, JSON.parse(sessionStorage.getItem('routes))) // 将路由数据components转换为组件
      setTimeout(()=>{
      router.addRoutes(routes)
      },0)
      // Promise.resolve().then(()=>{router.addRoutes(routes)})
     // router.addRoutes(routes)
   }
  next()
 }
})

router.addRoutes 下面 next({ ...to,replace: true}) 加上这个
https://www.jianshu.com/p/ab60f4dcf9ce?ivk_sa=1024320u