vue3通过后台接口生成动态路由，刷新页面白屏问题

思路：通过后台接口获取菜单数据，处理成需要的路由格式数据，使用addRoute添加路由，为避免刷新导致页面空白，需要使用路由拦截，在每次路由跳转前添加动态路由；注意要避免重复添加路由和死循环，可以使用vuex记录当前是否已经添加过了动态路由

路由分静态路由和动态路由

静态路由：

在登录后，请求菜单接口获取菜单数据，将数据处理成需要的路由格式，用addRoute添加动态路由

使用路由拦截，在路由跳转前，判断动态路由是否已经添加了，避免重复添加路由

router.beforeEach(async (to, from, next) => {
  if ((to.path == '/' && !store.getters.token) || to.name == 'Login') {
    if (
      to.name != undefined &&
      !store.getters.cacheKeepAlive.includes(to.name)
    ) {
      store.commit('app/setKeepAlive', to.name)
    }
    if (to.meta.title) {
      document.title = to.meta.title
    }
    next() //路由放行
  } else {
    // addMenuFlag标识是否已经添加过路由，避免死循环
    if (store.getters.token && !store.getters.addMenuFlag) {
      await store.dispatch('app/addAsyncRoutes')
      next({
        ...to, // next({ ...to })的目的,是保证路由添加完了再进入页面 (可以理解为重进一次)
        replace: true // 重进一次, 不保留重复历史
      })
    } else {
      next() //已经添加了动态路由，放行
    }
  }
})

菜单数据用vuex进行存储

initMenus(state, data) {
  state.menus = data
},
// 用于标识动态路由是否已经添加过
changeAddMenuFlag(state, flag) {
  state.addMenuFlag = true
}