vue-element-admin踩过的坑

vue-element-admin 是一个后台前端框架,框架本身包含了丰富的功能，具体功能可以去官网了解：https://panjiachen.github.io/vue-element-admin-site/zh/guide/，针对该框架实际应用遇到的坑一起探讨下。

一、本地启动会打开两次

      vue.config.js文件里面devServer下面的 open:true 删除或者注释掉

      package.json文件 scripts dev后面加 --open

二、动态路由addRoutes后刷新404或者空白

       解决思路：根据根目录下面的permission.js里面的路由规则修改

       1.修改router/index.js  404路由配置在最后，由于该项目是根据后台服务返回的用户类别来动态展示首页，所以配置meta:{roles: ['2']} 其中的role是后台返回的用户类型

export const asyncRoutes = [
  {
    path: '/',
    component: Layout,
    redirect: '/admin',
    meta:{roles: ['2']},
    children: [
      {
        path: 'admin',
        component: () => import('@/views/admin/index'),
        name: '首页',
        meta: { title: '管理员首页', icon: 'adminIndex', affix: true  }
      }
    ]
  },
  {
    path: '/customer',
    component: Layout,
    redirect: '/customer',
    meta:{roles: ['1']},
    children: [
      {
        path: 'customer/index',
        component: () => import('@/views/customer/index'),
        name: '首页',
        meta: { title: '终端厂商首页', icon: 'customerIndex', affix: true}
      }
    ]
  },
  {
    path: '/user',
    component: Layout,
    redirect: '/user',
    meta:{roles: ['0']},
    children: [
      {
        path: 'user/index',
        component: () => import('@/views/user/index'),
        name: '首页',
        meta: { title: '企业用户首页', icon: 'userIndex', affix: true }
      }
    ]
  }
  {
    path: '/systemManagement',
    component: Layout,
    redirect: 'noRedirect',
    meta: {
      title: '系统管理',
      icon: 'system',
      roles: ['1','0','2']
    },
    children: [
      {
        path: 'userManagement',
        component: () => import('@/views/systemManagement/userManagement'),
        meta: { title: '用户管理' }
      },
      {
        path: 'privilegeManagement',
        component: () => import('@/views/systemManagement/privilegeManagement'),
        meta: { title: '权限管理' }
      },
      {
        path: 'roleManagement',
        component: () => import('@/views/systemManagement/roleManagement'),
        meta: { title: '角色管理' }
      }
    ]
  },
  { path: '*', redirect: '/404', hidden: true }
]

 2.根据后台返回用户信息生成动态菜单 修改store/modules/permission.js

async generateRoutes({ commit, dispatch }) {
return new Promise(resolve => {
const roles = [];
// 获取session里的用户信息，如果有的话，将userType手动加入roles
    // 这里还可以改造，因为store状态管理浏览器刷新的时候数据会丢失，roles为空，filterAsyncRoutes（）处理后路由为空，导致页面404或者为空，userType可以存入到session，我这里暂时没有修改
const sessionUserInfo = window.sessionStorage.getItem('userInfo')
if (sessionUserInfo) {
const userInfo = JSON.parse(sessionUserInfo)
dispatch('user/SET_USER_INFO', userInfo)
roles.push(userInfo.userType)
} else {
const userType = store.getters.userInfo.userType;
roles.push(userType);
}
    //根据roles过滤路由信息
const accessedRoutes = filterAsyncRoutes(asyncRoutes, roles)
commit('SET_ROUTES', accessedRoutes)
resolve(accessedRoutes)
})
}

  3.router.addRoutes(accessRoutes)动态生成的路由信息添加到实例上

三、登录不跳转首页

    可能是因为路由与跳转路由匹配不上，或者token为空

    解决思路：根据根目录下面的permission.js里面的路由规则修改

     如果调用登陆服务后没有返回token信息，可以写死，setToken('00000000000000000000000')

• 点赞
• 收藏
• 分享
• 文章举报