Gx Admin Pro 文档

Appearance

路由和菜单 ​

路由和菜单是平台重中之重，在这里我会详细介绍

路由和菜单配置 ​

点击查看完整路由和菜单配置

路由和菜单 定义已交由 @gx-design-vue/pro-layout 组件完成

typescript
import type { defineComponent } from 'vue'
import type { RouteRecordRaw } from 'vue-router'
import type { RecordType } from '@gx-design-vue/pro-utils'
import { RouteLocation } from 'vue-router'

export type Component<T = any> =
  | ReturnType<typeof defineComponent>
  // @ts-ignore
  | (() => Promise<typeof import('*.vue')>)
  | (() => Promise<T>);

export type AppRouteModule = {
  meta?: Meta;
  query?: RecordType;
  params?: RecordType;
  fullPath?: string;
  linkPath?: string;
  children?: AppRouteModule[];
  hidden?: boolean;
  redirect?: string | ((to: RouteLocation) => string);
  component?: Component;
} & Omit<RouteRecordRaw, 'meta' | 'children' | 'redirect'>

export interface MenuDataItem extends MenuMeta {
  id?: number;
  menuId?: number;
  parentId?: number;
  createTime?: string;
  orderNum?: string;
  name?: string;
  path?: string;
  fullPath?: string;
  target?: string;
  linkPath?: string;
  key?: string;
  redirect?: string;
  component?: string;
  hidden?: boolean;
  meta?: MenuMeta;
  children?: MenuDataItem[];
}

export interface MenuMeta extends Meta {
  // 是否外链 0:是 1:否
  isFrame?: '0' | '1';
  // 菜单类型 M:目录 C:菜单
  menuType?: 'M' | 'C' | null;
  homePageFlag?: 1 | 0;
  //外链类型（选择是系统内则以iframe形式在系统内部展示，否则跳转新页面打开） 0:系统内 1:系统外
  outLinkType?: 0 | 1;
}

export interface Meta {
  // 唯一uuid
  key?: string;
  // 名称
  title?: string;
  // 主页
  homePage?: 1 | 0;
  // 菜单图标
  icon?: string;
  // 菜单图标类型
  iconType?: number;
  //隐藏
  hidden?: boolean;
  // 菜单隐藏
  hideInMenu?: boolean;
  // 菜单以及children隐藏
  hideChildrenInMenu?: boolean;
  // 外链类型（选择是系统内则以iframe形式在系统内部展示，否则跳转新页面打开） 0:系统内 1:系统外
  targetStatus?: number;
  // 外链地址
  target?: string;
  redirect?: string;
  // 标签栏显示状态（隐藏的路由是否显示在标签栏中（只有标签栏为显示转态才生效））
  tagHidden?: '0' | '1' | boolean;
  // 标签栏固定状态（标签栏路由地址是否固定（只有标签栏为显示转态才生效））
  tagFixed?: '0' | '1' | boolean;
  // 标签栏原始 fullPath
  originTagPath?: string;
  // 标签栏所属 fullPath
  currenFulltPath?: string;
  type?: string;
  disabled?: boolean;
  danger?: boolean;
  // 是否缓存
  keepAlive?: boolean;
  // 是否禁用动画
  animateDisabled?: boolean;
}

动态路由 ​

点击查看动态路由配置

代码实现

typescript
// 这里支持平级结构、也支持树形结构数据
const data: MenuDataItem[] = [
  // 一级菜单
  {
    children: [],
    createTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
    icon: 'gx-zujian',
    iconType: 1,
    menuId: 1,
    path: 'proComponents',
    redirect: '/proComponents/layout/waterMark',
    title: 'Pro组件',
    name: 'Pro组件',
    menuType: 'M',
    orderNum: '1',
    isFrame: '1',
    parentId: 0,
    target: '',
    hidden: false,
    outLinkType: 0
  },
  {
    children: [],
    createTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
    icon: 'gx-shuju',
    iconType: 1,
    menuId: 2,
    path: 'dataDisplay',
    title: '数据展示',
    name: '数据展示',
    menuType: 'M',
    orderNum: '3',
    isFrame: '1',
    parentId: 1,
    target: '',
    hidden: false,
    outLinkType: 0
  },
  {
    children: [],
    component: 'proComponents/dataDisplay/proTable/index',
    createTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
    tagFixed: '0',
    menuId: 3,
    path: 'proTable',
    title: '高级表格',
    name: '高级表格',
    menuType: 'C',
    orderNum: '1',
    isFrame: '1',
    parentId: 2,
    target: '',
    hidden: false,
    outLinkType: 0
  },
]

静态路由 ​

在本地代码写上固定的路由为静态路由。

本地路由生产 ​

  1. 在 /src/router/routes/modules 目录下创建 home.ts 文件
  2. 在 home.ts 中编写
typescript
const home: AppRouteModule[] = [
  // 这里是多层路由菜单
  {
    path: '/home',
    name: 'Home',
    meta: {
      title: '这是菜单目录'
    },
    children: [
      {
        path: '/menu',
        name: 'Menu',
        component: () => import('@/views/Home/menu.vue'),
        meta: {
          title: '这是菜单'
        },
      }
    ]
  },
  // 这里是一层菜单
  {
    path: '/home1',
    name: 'Home2',
    component: () => import('@/views/Home/menu2.vue'),
    meta: {
      title: '这是菜单'
    }
  }
]
export default home

/config/default/defaultSettings.ts 中 front 支持 front（前端导出路由）和all（后端导出路由）两种方式

typescript
const settings = {
  authentication: 'all' // 'all' | 'front'
}

内嵌 iframe 和 外链 ​

点击查看

后端数据 MenuData 代码实现

typescript
const menu = [
  // 内嵌 iframe
  {
    children: [],
    component: 'IframeView',
    createTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
    menuId: 42,
    title: 'antVue文档(内嵌)',
    name: 'antVue文档(内嵌)',
    menuType: 'C',
    orderNum: '1',
    isFrame: '0',
    parentId: 41,
    path: 'antVue',
    target: 'https://next.antdv.com/components/overview-cn/',
    hidden: false,
    outLinkType: 0
  },
  // 外链地址
  {
    children: [],
    createTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
    menuId: 43,
    title: 'procomponents(外链)',
    name: 'procomponents(外链)',
    menuType: 'C',
    orderNum: '2',
    isFrame: '0',
    parentId: 41,
    target: 'https://procomponents.ant.design/',
    hidden: false,
    outLinkType: 1
  }
]

静态路由 MenuData 代码实现

typescript
const menu = [
  {
    path: '/home1',
    name: 'Home2',
    component: () => import('@/views/layout/IframeView.vue'),
    meta: {
      title: '这是内嵌菜单',
      target: 'https://next.antdv.com/components/overview-cn/',
      targetStatus: 0
    }
  },
  {
    path: '/home1',
    name: 'Home2',
    meta: {
      title: '这是外链地址',
      target: 'https://procomponents.ant.design/',
      targetStatus: 1
    }
  }
]