vue-admin-element动态路由页面空白

本人踩坑日志
1. {
    
     path: '*', redirect: '/404', hidden: true },
在asyncRoutes动态路由最下面加入!


 ![垃圾blog图片不能显示草-------](https://img-blog.csdnimg.cn/20200812154735945.jpeg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RvbV9fY3k=,size_16,color_FFFFFF,t_70#pic_center)

2. vuex 持久化插件千万别用vuex-persistedstate
路由动态渲染是通过store.getters.roles  来判断的。页面刷新时 vuex 数据默认滞空，如果使用了持久化插件不能滞空。导致无法获取动态路由

 const hasRoles = store.getters.roles
      if (hasRoles.length > 0) {
    
    
        next()
      } else {
    
    
        try {
    
    
          const roles = await store.dispatch('user/getInfo')
          //   得到roles 进行 获取用户路由权限, 得到了需要显示的路由
          const accessRoutes = await store.dispatch(
            'permission/generateRoutes',
            roles.Permission
          )
          // 然后动态添加可以访问的路由
          await router.addRoutes(accessRoutes)
          // hack 方法确保addroutes 完成
          // 设置replace:true  导航不会留下历史记录
          next({
    
     ...to, replace: true })
        } catch (error) {
    
    
          // 删除token ，转到登录页面重新登录
          await store.dispatch('user/resetToken')
          next(`/login?redirect=${
     
     to.path}`)
          Message({
    
    
            type: 'error',
            message: error,
          })
          NProgress.done()
        }
      }