菜单和路由

WARNING

web端框架中菜单和页面是有区别的。 菜单一定对应到一个页面，但是页面不一定在菜单上。这个也很容易理解，有些页面，比如登录页，比如弹出页等，不会出现在左侧的菜单中。

一个页面一定对应一个路由。我们在 src/router/pageMap.js文件中列出了每个路由对应的页面组件。

菜单说明

菜单在展示上指的是下面绿色方框的部分。

web端框架菜单分为静态菜单和动态菜单。 相关的配置文件在 src/router 文件夹中。

bash

src
└── router
    ├── module        # 模块
       ├── error.js   # 错误页相关 403/404/500
       ├── home.js    # 首页
       ├── remain.js  # 登录页/跳转页路由
       ├── ...        # 其他静态菜单1
       ├── ...        # 其他静态菜单2
    ├── index.js      # 路由入口文件       
    ├── pageMap.js    # 路由-页面组件映射       
    └── utils.js      # 路由工具函数

静态菜单

静态菜单就是不依赖于后端接口返回的数据，固定的存在前端项目中的菜单，如首页等。

提醒

由于基础平台的路由和菜单系统主要基于动态路由，即由后端返回角色的菜单和页面信息等，与权限系统绑定。静态菜单主要用于一定存在的菜单或者临时测试。

下面是一个添加静态菜单的例子:

// 在src/router/module文件夹下添加relation.js文件，并且补充相关的vue模板
export default {
    path: '/relation',
    name: 'relation',
    redirect: '/relation/base', //表示重定向到/relation/base
    meta: {
      icon: 'icon-tool',
      title: '关系图',
    },
    children: [
      {
        path: '/relation/base',
        name: 'relation-base',
        component: () => import('@/pages/relation/base.vue'),
        meta: {
          icon: null,
          title: '基本用法',
        }
      },
      {
        path: '/relation/net',
        name: 'relation-net',
        component: () => import('@/pages/relation/net.vue'),
        meta: {
          icon:null,
          title: '关系网',
        }
      },
      {
        path: '/relation/tree',
        name: 'relation-tree',
        component: () => import('@/pages/relation/tree.vue'),
        meta: {
          icon:null,
          title: '企业图谱',
        }
      },
    ]
  }

动态菜单

动态菜单是基础平台统一采用的路由和菜单组织模式。

通过/plat/resource/getUserResource接口获取。web端框架自动对于返回的数据进行的处理和注册，无需关注其实现细节。

添加动态菜单

通过 基础管理->权限管理->资源管理->新增 添加动态菜单。

提醒

需选择资源类型为菜单。

可以嵌套添加子菜单，一般不超过3层。

在 src/page 文件下按照您的习惯新增一个Vue文件作为页面模板。

vue

<template>
  <div>Test</div>
</template>

在src/router/pageMap.js指定路由和模板的关联。

export const views = {
     ...
     '/test': () => import('@/pages/test.vue'),
}

这样一个动态菜单就添加好了🎉~

其他动态页面

如上面所述，有时候我们需要添加一些页面但不想在菜单的出现。如一些操作路由等。

以添加一个编辑用户的页面为例:

提醒

页面和正常页面的构建没有差别，会重新打开一个tab,

页面

通过 基础管理->权限管理->资源管理->新增 添加动态页面。类型选择 页面 。

注意

页面 的路由需要写成 /organ/user-edit

在 src/page/organ 文件下按照您的习惯新增一个Vue文件作为页面模板。

注意

页面 的路由建议放在 src/page/organ下。

vue

<template>
  <div>user-edit</div>
</template>

在src/router/pageMap.js指定路由和模板的关联。

export const views = {
     ...
     '/organ/user-edit': () => import('@/page/organ/user-edit.vue'), 
}

这样一个一般动态页面就添加好了🎉~

菜单和路由 ​

菜单说明 ​

静态菜单 ​

动态菜单 ​