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

背景

最近项目过程中出现了一个奇怪的问题，当用户登入系统后部分路由首次跳转时会出现空白页面，但是在该页面上刷新又可以正常显示路由对应的页面。

系统内包含用户、角色、菜单等管理模块，前端使用了动态路由

问题复现

1. 系统内有两个角色，A1和A2
2. A1角色包含P1、P2、P3页面的权限
3. A2角色包含P1、P2、P3、P4、P5页面的权限
4. 当首次使用A1角色对应的用户登入系统时，侧边栏所有菜单都可以正常访问
5. 此时退出A1角色对应的用户并使用A2角色对应的用户登入系统，其中P1、P2、P3菜单对应的页面可以正常访问，但是P4、P5对应的页面首次访问时出现空白的情况，刷新后P4、P5对应的页面可以正常访问

猜想原因

由于项目内使用到了Vue-Router动态路由，猜想可能是因为用户退出登录后再次登入，未重新挂载新的路由导致的。
动态路由代码如下：

// 路由前置导航守卫,处理页面刷新、登录退出
router.beforeEach((to, from, next) => {
   
  // 登录页直接跳转
  if (to.path === '/login') {
   
    next();
    // 回到登录页面,清除路由、当前登录人等信息
    clearDynamicMenus();
    clearUser();
    // 非登录页面需要校验是否已登录、是否页面刷新
  }