解决进入主页面动态权限菜单未显示和页面刷新白屏或路由404页面问题

1.解决登录成功跳转到主界面有时主界面菜单列表不显示问题

1.原因分析：在登陆进入主页面时，动态权限菜单并未获取到，导致无法显示。

2.解决问题：

   方法一：在跳转到主页面时，对跳转的代码设置定时器

  setTimeout(() => {
                        this.$router.push({path: '/home'}) 
                    }, 2000);

  方法二：将接受的动态权限菜单的改为computed计算属性接收

  

 computed: {
        menuList() {
            // 动态路由权限列表
            return this.$store.getters['menu/menu']
        },
    },

方法三：使用promise对象在请求菜单权限接口完成，并动态添加路由后再跳转到主页面

// 登录：
// 电泳动态权限菜单并动态创建路由的方法
this.$store.dispatch('menu/save_menu', resultInfo.role_id).then(() => {
   ElMessage.success('登录成功')
   this.$router.push({path: '/home'})
})

// store中的方法，获取动态权限菜单并动态创建路由
actions: {
     save_menu({commit}, roleId) { // roleId 角色id
          // 解决办法：返回一个promise对象
          return new Promise(async (resolve, reject) => { 
              const data = await RquestSystemMenus(roleId) // roleId 角色id
              const { resultCode, resultInfo } = data
              if(resultCode === 1) {
                  const menulist = useMenu(resultInfo)
                  // 使用路由的实例（router）的addRoute动态添加路由，参数一：要添加的路由记录
                  menulist.forEach(route => router.addRoute(route))
                  commit('SAVE_MENU', menulist)
                  resolve()
              } else {
                  ElMessage.error(resultInfo)
                  reject()
              }
          })
      }
  },

2.页面刷新白屏问题或找路由404页面问题原因分析？

1.由于刷新页面，页面重新加载（重新加载整个程序），从入口文件main.js和根组件App.vue执行，路由会被初始化，初始化后动态添加的路由会丢失。导致无法找到动态添加的路由，从而出现白屏和404页面问题

2.路由对应的组件是动态添加的 router.addRoute(route) ,在登录成功时获取权限菜单格式化后动态添加

3.虽然我们将权限菜单的数据保存到store，并做了持久化存储到localStorage，但是对象是不能持久化存储的会报错，component组件对象刷新界面后丢失

3.解决办法：

登录时保存角色的id

方法一：在App.vue组件中再次动态请求权限菜单接口，动态添加路由，再次跳转当前路由。注意：在路由跳转时，因为接口是异步的，同时执行代码的话会导致路由跳转时动态路由并未添加，还会出现白屏问题。解决办法：在接口的回调中跳转（不推荐）,推荐方法：返回一个promise对象，在then方法中跳转路由

方法二：在全局路由导航中，对所有路由进行拦截，再次动态请求权限菜单接口，动态添加路由，再次跳转当前路由(不推荐，在接口未响应的这段时间，全局前置路由可能有拦截多次，导致再次请求权限菜单接口)

方法一：

方法二：