基于 vue-element-admin 基础模板实现侧边栏菜单动态渲染

码云仓库：https://gitee.com/shayvmo/vue-element-template

 

【正文】

基于 vue-admin-template 基础模板实现动态生成侧边栏菜单

 

【思路】

获取用户信息的时候，把后端返回的路由保存在 store 里面，执行生成路由时，合并前端静态定义的路由以及后端获取回来的动态路由

 

【主要修改文件】

src/permission.js


src/store/modules/permission.js


utils/_import.js


utils/router.js

文件： ` src/permission.js `

获取用户信息，存储路由

` const { roles } = await store.dispatch('basic/getInfo') `

合并路由，渲染路由

` const accessRoutes = await store.dispatch('permission/generateRoutes', { 'roles': roles, 'routers': store.getters.routers }) `

【后端返回数据结构】

具体根据 框架 原本需要返回的结构即可。组件那里返回 组件名称，会实现自动加载

routers = [
{
    path: '/',
    component: 'Layout',
    redirect: '/dashboard',
    children: [
        {
             path: 'dashboard',
             name: 'Dashboard',
             component: 'dashboard',
             meta: { 
                 title: '仪表盘', 
                 icon: 'dashboard' 
             }
         }
    ]
}
]

【vue-element-admin】
https://panjiachen.github.io/vue-element-admin-site/zh/