Explorar el Código

fix: 优化路由

wanggaokun hace 11 meses
padre
commit
8ac996f819
Se han modificado 3 ficheros con 21 adiciones y 3 borrados
  1. 3 2
      src/stores/modules/auth.ts
  2. 17 0
      src/utils/index.ts
  3. 1 1
      src/views/system/menu/index.vue

+ 3 - 2
src/stores/modules/auth.ts

@@ -1,6 +1,6 @@
 import { AuthState } from '@/stores/interface'
 import { getRoutersApi } from '@/api/modules/system/menu'
-import { getFlatMenuList, getShowMenuList, getAllBreadcrumbList } from '@/utils'
+import { getFlatMenuList, getShowMenuList, getAllBreadcrumbList, getMenuPath } from '@/utils'
 // 动态路由
 import dynamicRouterList from '@/routers/modules/dynamicRouter.json'
 
@@ -29,7 +29,8 @@ export const useAuthStore = defineStore('admin-auth', {
     // Get AuthMenuList
     async getAuthMenuList() {
       const { data } = await getRoutersApi()
-      this.authMenuList = [...dynamicRouterList.data, ...data] as any[]
+      let menuList = [...dynamicRouterList.data, ...data] as any[]
+      this.authMenuList = getMenuPath(menuList)
     },
     // Set RouteName
     async setRouteName(name: string) {

+ 17 - 0
src/utils/index.ts

@@ -146,6 +146,23 @@ export function getUrlWithParams() {
   return url[mode]
 }
 
+/**
+ * @description 使用递归过滤出需要渲染在左侧菜单的列表 (需剔除 hidden == true 的菜单)
+ * @param {Array} menuList 菜单列表
+ * @returns {Array}
+ * */
+export function getMenuPath(menuList: Menu.MenuOptions[], path?: string) {
+  let newMenuList: Menu.MenuOptions[] = JSON.parse(JSON.stringify(menuList))
+  return newMenuList.map(item => {
+    if (path) {
+      const newPath = path.replace(/none|\/none/g, '')
+      item.path = `${newPath}/${item.path}`
+    }
+    item.children?.length && (item.children = getMenuPath(item.children, item.path))
+    return item
+  })
+}
+
 /**
  * @description 使用递归扁平化菜单,方便添加动态路由
  * @param {Array} menuList 菜单列表

+ 1 - 1
src/views/system/menu/index.vue

@@ -251,7 +251,7 @@ const setItemsOptions = () => {
       show: val => {
         return val?.menuType !== 'F'
       },
-      tooltip: '访问的路由地址,如:`/system/user`,如外网地址需内链访问则以`http(s)://`开头',
+      tooltip: '访问的路由地址,如:`user`(none 为空),如外网地址需内链访问则以`http(s)://`开头',
       compOptions: {
         elTagName: 'input',
         placeholder: '请输入路由地址'