Explorar o código

【新增】在菜单管理中,可通过“路由地址”添加 `?` 拼接参数

YunaiV hai 9 meses
pai
achega
f75e8d1fd4
Modificáronse 1 ficheiros con 13 adicións e 1 borrados
  1. 13 1
      src/utils/routerHelper.ts

+ 13 - 1
src/utils/routerHelper.ts

@@ -2,6 +2,7 @@ import type { RouteLocationNormalized, Router, RouteRecordNormalized } from 'vue
 import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
 import { isUrl } from '@/utils/is'
 import { cloneDeep, omit } from 'lodash-es'
+import qs from 'qs'
 
 const modules = import.meta.glob('../views/**/*.{vue,tsx}')
 /**
@@ -64,6 +65,7 @@ export const generateRoute = (routes: AppCustomRouteRecordRaw[]): AppRouteRecord
   const res: AppRouteRecordRaw[] = []
   const modulesRoutesKeys = Object.keys(modules)
   for (const route of routes) {
+    // 1. 生成 meta 菜单元数据
     const meta = {
       title: route.name,
       icon: route.icon,
@@ -73,10 +75,20 @@ export const generateRoute = (routes: AppCustomRouteRecordRaw[]): AppRouteRecord
         route.children &&
         route.children.length === 1 &&
         (route.alwaysShow !== undefined ? route.alwaysShow : true)
+    } as any
+    // 特殊逻辑:如果后端配置的 MenuDO.component 包含 ?,则表示需要传递参数
+    // 此时,我们需要解析参数,并且将参数放到 meta.query 中
+    // 这样,后续在 Vue 文件中,可以通过 const { currentRoute } = useRouter() 中,通过 meta.query 获取到参数
+    if (route.component && route.component.indexOf('?') > -1) {
+      const query = route.component.split('?')[1]
+      route.component = route.component.split('?')[0]
+      meta.query = qs.parse(query)
     }
+
+    // 2. 生成 data(AppRouteRecordRaw)
     // 路由地址转首字母大写驼峰,作为路由名称,适配keepAlive
     let data: AppRouteRecordRaw = {
-      path: route.path,
+      path: route.path.indexOf('?') > -1 ? route.path.split('?')[0] : route.path,
       name:
         route.componentName && route.componentName.length > 0
           ? route.componentName