vue-admin-template的菜单数据是写死的,可以改成数据库查询动态展示
1 保留基础路由
特别注意,原配置中的*配置要注释或删除,否则后续配置完成后动态菜单刷新会报404错误,该配置需要在addRoutes添加,见后续说明
2 获取后端菜单数据
修改getInfo方法,获取菜单数据并保存到vuex中;同时还需后端java接口做好了菜单数据准备
注:如果后端没准备好,这里menus可以先直接定义数组测试,参考数组
[{
"component": "Layout",
"path": "/user",
"redirect": "/user/list",
"name": "userManage",
"meta": {
"icon": "userManage",
"title": "用户管理"
},
"children": [{
"component": "user/user",
"path": "list",
"name": "userList",
"meta": {
"icon": "userList",
"title": "用户列表"
}
}, {
"component": "user/role",
"path": "role",
"name": "roleList",
"meta": {
"icon": "role",
"title": "角色列表"
}
}, {
"component": "user/permission",
"path": "permission",
"name": "permissionList",
"meta": {
"icon": "permission",
"title": "权限列表"
}
}]
}]
3 动态生成路由
根据环境配置导入组件,在vue中,将菜单路径作为参数,实现路由地址的注入
在 src/router 文件夹下,建立两个文件,各只需添加一行代码, 定义导入方法
src/router/_import_development.js
//开发环境导入组件
module.exports = file => require('@/views/' + file + '.vue').default
src/router/_import_production.js
//生产环境导入组件
module.exports = file => () => import('@/views/' + file + '.vue')
特别注意:上述路径views后面不要遗漏斜杠
4 生成路由
在路由钩子中,过滤路由,并生成路由,核心在src目录下的permission.js中,修改router.beforeEach路由钩子