路由菜单

路由组成

路由菜单有两部分组成，一部分为常用固有菜单，无需权限控制，所有人可见，一部分有后端生成返回前端，可分角色权限控制。

前端定义路由主要位于：src\router\constant.ts 文件

后端返回路由经由 路由守卫(src\hooks\routes\useRouteGuard.ts) 处理的同时生成对应前端路由，生成的路由分为两部分 (src\stores\modules\permission.ts 处理):

生成完整的树结构,用于侧边栏菜单渲染
生成只有两级的菜单树，主要用于keep-alive , vue-router 只能处理两级目录，三级及以上的目录无法keep-alive

菜单信息

export interface AppRouteRecordRaw {
  path: string
  name?: string | symbol
  component: Component | string
  hidden?: boolean
  meta?: AppRouteMeta
  redirect?: string
  children?: AppRouteRecordRaw[]
  props?: Record<string, any>
  query?: string
  noShowingChildren?: boolean
  always_show?: boolean
  menu_type?: MenuType
  id?: string
  pid?: string
  menu_name?: string
}

export interface AppRouteMeta {
  title: string
  icon?: string
  activeMenu?: string
  hidden?: boolean
  link?: string
  i18n?: string
  no_cache?: boolean
}

/**
 * @ C 为菜单，具有路由导航的菜单，曲子CaiDan拼音的第一个字母
 * @ M 为目录，作为路由目录而存在，取自MuLu的第一个字母
 * @ F 为Api级别，取自Function的第一个字母
 */
export enum MenuType {
  C = 'C',
  M = 'M',
  F = 'F',
}

AppRouteRecordRaw 里面有很多冗余定义信息,并没有所有都使用,后续应该会根据使用情况精简,主要需关注name,path,component,menu_name,menu_type 等几个

AppRouteMeta

title: string              // 标题显示
  icon?: string              // 图标名称
  activeMenu?: string        // 激活菜单路径
  hidden?: boolean           // 是否隐藏
  link?: string              // 外链
  i18n?: string              // 国际化标志
  no_cache?: boolean         // keep-alive 标志 true时不缓存

MenuType

export enum MenuType {
  C = 'C',      //菜单，具有路由导航的菜单
  M = 'M',      //为目录，作为路由目录而存在
  F = 'F',      //为Api级别，取自Function的第一个字母,api权限和单独按钮权限
}

路由菜单#

路由组成#

菜单信息#

路由菜单

路由组成

菜单信息