前端开发框架
当前页

菜单 ​

使用说明 ​

目前系统的菜单逻辑和路由逻辑为：

  • 前端生成文件路由：{path, component} 等 ， 如：
  • 后端获取菜单
  • 保留 前端路由中 筛选 跟后端菜单匹配的 path

代码说明 ​

  • 宽度配置：src/settings/config/projectConfig.ts menuWidth: 200,

  • 后端数据结构：mock/sys/menu.ts

  • 白名单 src/router/index.ts

ts
// 系统白名单
const SYS_WHITE_LIST: string[] = [ERROR_PAGE, '/', LOGIN_PATH];
// 业务白名单
export const BUS_WHITE_LIST: string[] = [];

  • 前端路由：前端路由采用vite-plugin-pages组件，基于文件的路由系统查看前端路由数据 src/router/index.ts allRoutes 变量

  • 获取当前路由

ts
import { Meta } from '/@/stores/types';
// 获取普通路由
import { useRouter } from 'vue-router';
const route = useRouter();
const meta1: any = (route.currentRoute.value as any).meta;
// 某些页面通过id进行匹配,  则无法获取对应路由中的meta信息，
// 如：/micro/vite/1  /micro/vite/2， 对应同一个路由/micro/vite/:id
// 可以使用如下方式获取，如需在"watch或者打开页面时"使用以下方法，需要在nextTick中获取
nextTick(() => {
  const meta: Meta = permissionStore.getCurrentMenu.meta as Meta;
});