vue3动态路由开发环境刷新页面空白

网上找了很久终于解决了，这本就是个小问题，但是查到的文章篇幅太多，看半天也没说到点上，现在分享一下我的解决思路，希望对你有帮助。demo如下：

let isLoadedRoute = false;
router.beforeEach(async (to, from, next) => {
  if (isLoadedRoute) {
    next()
  } else {
   // 加载异步路由--
    asyncRouterMap.forEach((i: any) => {
      router.addRoute(i)
    });
    isLoadedRoute = true;
    next(to)
  }
})

简单的解释就是：f5刷新进入页面就会加载路由，但是异步路由还没加载进来，必须等加载异步路由之后，再跳转到当前路由让路由重新加载。

最核心的代码就是isLoadedRoute的判断以及next(to)

isLoadedRoute的作用，用于路由守卫判断是否加载了异步路由避免重复加载。

next(to)的作用，这里引用vueRouter官方文档来解释。