vue3 Vue-Router路由首次跳转页面空白,刷新页面又可以正常访问

背景： 系统分角色，不同角色的菜单栏不同； 根据登录用户的角色配置动态路由；

问题： 用户登录角色A后，退出，重新登录另外一个角色B时，登录后首次会跳转页面空白，刷新页面后又可以正常访问了；

排查问题：

发现登录后的Routes还是上一个角色的路由！当前角色的路由没有被加载上去； 那么vue-router也没有更新路由的接口；

解决方案为： 在登录页面判断是否有动态路由的存在，如果有，就刷新当前页面；

onMounted(() => {
  let rou = router.getRoutes()
  // 3是我的静态路由的数量
  if (rou.length > 3) {
    location.reload();
  }
})