Gitcx框架文档

新增

# 新增页面

这里的『新增页面』从页面模板到菜单，分两步，先创建页面，在创建菜单。

# 创建页面

在src / views下创建新的文件夹和 ts文件

config
src
  api
  views
+   NewPage
+     NewPage.ts
  ...
...
package.json

# 创建菜单

在src / router / modules下创建 ts文件，只需在该目录下的创建文件即可，程序会自动创建菜单和路由

config
src
  api
  router
    modules
+     NewPage.ts
  ...
...
package.json

# 菜单内容

import { RouteRecordRaw } from 'vue-router';
import { Layout } from '@/router/constant';

const routes: Array<RouteRecordRaw> = [
  {
    path: '/newPage',
    name: 'NewPage',
    component: Layout,
    meta: {
      sort: 1,
      title: '新菜单',
      isRoot: true,//如果只有一个顶级菜单，设置 true 存在子菜单，无效设置 
    },
    children: [
      {
        path: 'index',
        name: `newPageIndex`,
        meta: {
          title: '新菜单',
          activeMenu: 'newPageIndex',
        },
        component: () => import('@/views/newPage/NewPage.vue'),
      },
      //多个菜单 以此按上面对象结构 添加 即可
    ],
  },
];
export default routes;

# Meta 配置说明

export interface RouteMeta {
  //菜单名称 必填
  title: string;
  //禁用菜单
  disabled:boolean;
  //隐藏菜单 路由依然可访问
  hidden: boolean;
  //菜单图标  
  icon: VNode;
  //缓存该路由
  keepAlive: boolean;
  //排序越小越排前
  sort: number;
  //取消自动计算根路由模式 开启之后，当菜单子菜单只有1个的时候，会直接显示子菜单
  alwaysShow: boolean
  // 当路由设置了该属性，则会高亮相对应的侧边栏。
  // 这在某些场景非常有用，比如：一个列表页路由为：/list/basic-list
  // 点击进入详情页，这时候路由为/list/basic-info/1，但你想在侧边栏高亮列表的路由，就可以进行如下设置
  // 注意是配置高亮路由 `name`，不是path
  activeMenu: string;
  //是否跟路由 顶部混合菜单，必须传 true，否则左侧会显示异常（场景就是，分割菜单之后，当一级菜单没有子菜单）
  isRoot: boolean;
  //内联外部地址
  frameSrc: string;
  //菜单包含权限集合，满足其中一个就会显示
  permissions: string[];
  //是否固定标签 比如 常见的主控台 或者特定页面
  affix: boolean;
}

图表