Diboot 低代码开发平台

# 添加页面

添加页面需要添加页面相关的Vue组件与相对应的路由配置

# 添加Vue组件

  • 在src/views文件夹下创建页面对应的文件夹以及对应的页面组件文件

# 添加路由配置

# 自动添加路由配置

👉 使用devtools 自动生成您的前端页面

TIP

diboot-devtools 为您提供了前端页面和后端接口的快速配置、一键生成！

# 手动添加路由配置

  • 后台菜单是根据路由配置自动生成的，具体可参考路由与菜单 (opens new window)
  • 在src/config/router.config.js文件中，可以配置需要新增页面的路由。
  • 对于需要进行权限控制的菜单，需要放到asyncRouterMap中进行配置，其他不需要进行权限控制或所有人可用的菜单，可以放到constantRouterMap中。

devtools具有前端生成能力，因此手动添加路由不建议直接放在asyncRoutes路由中，而是交给generateRouterMap处理，由devtools生成的路由会自动写入generateRouterMap集合

export const asyncRouterMap = []
// 在router.config.js 末尾添加如下内容
const generateRouterMap = []
asyncRouterMap[0].children.splice(1, 0, ...generateRouterMap)
1
2
3
4
  • 手动路由配置方式，可参考已有配置，如下：
// 系统管理
{
  path: '/system',
  redirect: '/system/dictionary/list',
  component: PageView,
  meta: { title: '系统管理', icon: 'dashboard' },
  children: [
    {
      path: '/system/dictionary/list',
      name: 'DictList',
      component: () => import('@/views/system/dictionary/list'),
      meta: { title: '数据字典管理', keepAlive: true, permission: ['Dictionary'] }
    },
    // ...
    {
      path: '/system/iamLoginTrace/list',
      name: 'IamLoginTraceList',
      component: () => import('@/views/system/iamLoginTrace/list'),
      meta: { title: '登录日志查看', keepAlive: true, permission: ['IamLoginTrace'] }
    }
  ]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
  • keepAlive：设置为true，将会在重新进入该页面时保持之前的数据，如果设置为false，则会重新加载数据；
  • permission：为显示该菜单所需要该用户具有的权限码，这个码会在稍后配置系统权限的时候自动代入。
  • 如果不配置permission，将不会对该菜单进行权限验证，所有用户都可以访问该页面，如果permission的列表中配置了多个权限码，那么具有其中一个就将会具有当前菜单的访问权限。
  • 配置完成后，就可以对这些页面进行访问了（如果配置了权限码，可以先使用具有管理员权限的账号访问到）。

← 权限控制 →