标准版admin后台页面添加及开发操作流程及注意事项
基础介绍
CRMEB后台管理是基于vue2技术栈进行开发搭建的
Vue Router 使用的是v3版本，mode为history模式 如需修改 mode 请在src/setting.js中修改routerMode
新建页面
新建路由
根据目录结构，需要在src/router/modules中对应模块中，添加对应路由（如有其他模块建议另行创建）
实例中：该页面的访问路径(路由地址)为 /admin/order/list
// 实例 该路由创建成功后 访问路径为 /admin/order/listimport BasicLayout from '@/components/main';const pre = 'order_';export default {path: '/admin/order',name: 'order',header: 'order',redirect: {name: `${pre}list`,},component: BasicLayout, // 布局组件children: [{path: 'list',name: `${pre}list`,meta: {auth: ['admin-order-storeOrder-index'], // 路由权限title: '订单管理',},component: () => import('@/pages/order/orderList/index'), // 动态引入 对应pages中文件路径}],
};
Copy
注意
如果你添加的是新建模块 指：在src/router/modules中新建路由文件
你还需要再 src/router/routers.js中进行引入
在上方引入并在下方使用
创建文件
在src/pages下创建模块文件 例如test,模块中在添加对应的功能文件
添加规则
运行起后台admin项目找到对应目录 设置/权限管理/权限规则
如果是创建一级目录点击图中1添加规则，如果是在对应一级模块下创建二级或三级目录 根据列表及展开项，点击后方2添加子菜单进行添加。
添加子菜单注意事项
必填项
按钮名称、路由地址为必填项（如果创建一级目录，需添加对应图片，可点击图片后方icon进行选择）
路由
路由地址参加第一步中 路由创建后的路由地址进行添加 例如：/admin/user/list
权限
权限标识参考第一部中 meta中auth 填写的权限规则
其他问题
1.如果需要添加规则效验可在 src/router/index.js中进行添加具体使用方法可参考官方示例导航守卫
2.如果按上面布置添加完成页面却出现 该页面不存在时。请检查路由文件及权限规则中路径添加是否正确。
3.如果出现 因权限无法访问问题
- 请检查规则添加的权限与路由文件中的权限规则是否一致
- 检查
设置/角色管理中的菜单权限