Vue动态权限路由addRoutes执行初次白屏解决方法

需求： 当用户登录，或者已经登录状态下刷新和重进web端，除了普通的路由配置（login、UserInfo、home、404等），还需要用户的权限路由，需要根据用户信息拿到当前用户的权限路由，动态添加路由。
问题：在动态添加的路由页面刷新，会造成白屏。

在addRoutes()之后立即访问被添加的路由会白屏，这是因为刷新会重新执行一次addRouters(),然而此时addRoutes()的回调没有执行结束，就立刻访问被添加的路由，因而找不到刚刚被添加的路由所以导致白屏。因此需要从新访问一次路由才行
解决：使用next({ ...to,replace: true})来确保addRoutes()时动态添加的路由已经被完全加载上去。

router.beforeEach(async(to, from, next) => {
  // start progress bar
  NProgress.start()

  // set page title
  document.title = getPageTitle(to.meta.title)

  // determine whether the user has logged in
  const hasToken = getToken()

  if (hasToken) {
    if (to.path === '/login') {
      // if is logged in, redirect to the home page
      next({ path: '/' })
      NProgress.done()
    } else {
      const hasGetUserInfo = store.getters.name
      if (hasGetUserInfo) {
        next()
      } else {
        try {
          // get user info
          await store.dispatch('user/getInfo')//此次dispatch派发的actions中调用了addRouters
          //使用next({ ...to,replace: true})来确保addRoutes()时动态添加的路由已经被完全加载上去
          //如果 addRoutes 并未完成，路由守卫会一层一层的执行执行，直到 addRoutes 完成，找到对应的路由
          next({ ...to, replace: true })
        } catch (error) {
          // remove token and go to login page to re-login
          await store.dispatch('user/resetToken')
          Message.error(error || 'Has Error')
          next(`/login?redirect=${to.path}`)
          NProgress.done()
        }
      }
    }
  } else {
    /* has no token*/

    if (whiteList.indexOf(to.path) !== -1) {
      // in the free login whitelist, go directly
      next()
    } else {
      // other pages that do not have permission to access are redirected to the login page.
      next(`/login?redirect=${to.path}`)
      NProgress.done()
    }
  }
})