refactor: 路由配置

src/layout/components/sidebar/sidebar.vue

@@ -2,21 +2,22 @@
 import { sidebarMenus } from '@/router/index'
 import { useDesignSettingStore } from '@/store/modules/design-setting'
 import SidebarLogo from '../sidebar-logo/sidebar-logo.vue'
-// import { type MenuOption } from '@/router/utils'
+import { type MenuOption } from '@/router/utils'
 import { useRoute, useRouter } from 'vue-router'
 import { ref, watch } from 'vue'
 import EllipsisTooltipText from '@/components/ellipsis-tooltip-text.vue'
+import { ElMessage } from 'element-plus'
 
 const designSettingStore = useDesignSettingStore()
 const currentRoute = useRoute()
 const router = useRouter()
 
-const menuValue = ref(currentRoute.meta.key)
+const menuValue = ref<string>((currentRoute.meta.key as string) || '')
 
 watch(
   () => currentRoute.fullPath,
   () => {
-    menuValue.value = currentRoute.meta.key
+    menuValue.value = currentRoute.meta.key as string
   },
 )
 
@@ -24,8 +25,14 @@ function handleLogoClick() {
   router.push({ name: 'Root' })
 }
 
-function handleMenuItemClick(routeName: any) {
-  router.push({ name: routeName })
+function handleMenuItemClick(menuInfo: MenuOption) {
+  if (menuInfo.routeName) {
+    router.push({ name: menuInfo.routeName })
+  } else if (menuInfo.path) {
+    router.push(menuInfo.path)
+  } else {
+    ElMessage.error('菜单项配置错误')
+  }
 }
 </script>
 
@@ -42,12 +49,12 @@ function handleMenuItemClick(routeName: any) {
           class="!border-none"
         >
           <template v-for="menuInfo in sidebarMenus">
-            <template v-if="!menuInfo.children">
+            <template v-if="!menuInfo.children || menuInfo.children.length === 0">
               <el-menu-item
                 :key="menuInfo.key"
                 :index="menuInfo.key"
                 class="relative hover:!bg-[unset]"
-                @click="handleMenuItemClick(menuInfo.routeName)"
+                @click="handleMenuItemClick(menuInfo)"
               >
                 <span
                   class="absolute inset-x-[10px] inset-y-[4px] rounded-[6px] bg-[#e5f6fd] opacity-0 transition"
@@ -102,7 +109,7 @@ function handleMenuItemClick(routeName: any) {
                   <el-menu-item
                     :index="menuChildInfo.key"
                     class="group relative hover:!bg-[unset]"
-                    @click="handleMenuItemClick(menuChildInfo.routeName)"
+                    @click="handleMenuItemClick(menuChildInfo)"
                   >
                     <span
                       class="absolute inset-x-[10px] inset-y-[4px] rounded-[6px] bg-[#e5f6fd] opacity-0 transition"

src/layout/index.vue

@@ -42,10 +42,12 @@ watchEffect(() => {
         <NavBar class="h-full" />
       </el-header>
 
-      <el-main class="main-content-wrapper">
-        <RouterView v-slot="{ Component }">
+      <el-main class="main-content-wrapper !overflow-hidden">
+        <RouterView v-slot="{ Component, route }">
           <Transition appear name="fade-slide" mode="out-in">
-            <Component :is="Component" />
+            <div :key="route.fullPath" class="h-full overflow-hidden">
+              <Component :is="Component" />
+            </div>
           </Transition>
         </RouterView>
       </el-main>

src/router/utils.ts

@@ -3,12 +3,11 @@ import { nanoid } from 'nanoid/non-secure'
 import { createWebHashHistory, createWebHistory, type RouteRecordRaw, type RouterHistory } from 'vue-router'
 
 export interface MenuOption {
-  // label: (() => VNode) | string
   label: string
   key: string
   routeName: string
-  // icon: (() => VNode) | null
   icon: string
+  path: string
   children?: MenuOption[]
 }
 
@@ -37,16 +36,20 @@ function menuSort(routes: RouteRecordRaw[]) {
 }
 
 export function menuFilterSort(routes: RouteRecordRaw[]) {
-  function createRouteKey(routes: RouteRecordRaw[]) {
+  function createRouteKey(
+    routes: RouteRecordRaw[],
+    parentRoute: (RouteRecordRaw & { meta: { key: string } }) | null = null,
+  ) {
     routes.forEach((route, index) => {
       if (route.meta) {
-        route.meta.key = nanoid()
+        route.meta.key =
+          route.meta.hideSideMenItem && parentRoute && parentRoute.meta.key ? parentRoute.meta.key : nanoid()
       } else {
-        route.meta = { key: nanoid(), title: '', rank: 1001 + index }
+        route.meta = { key: parentRoute?.meta?.key || nanoid(), title: '', rank: 1001 + index }
       }
 
       if (route.children) {
-        createRouteKey(route.children)
+        createRouteKey(route.children, route as RouteRecordRaw & { meta: { key: string } })
       }
     })
   }
@@ -73,7 +76,7 @@ export function menuFilterSort(routes: RouteRecordRaw[]) {
     routes.unshift(...rootRouteChildren)
   }
 
-  function createMenuOptions(routes: RouteRecordRaw[]) {
+  function createMenuOptions(routes: RouteRecordRaw[], parentRoute: RouteRecordRaw | null = null) {
     const menuOptions: MenuOption[] = []
 
     routes.forEach((route) => {
@@ -83,18 +86,15 @@ export function menuFilterSort(routes: RouteRecordRaw[]) {
       }
 
       const menuOption: MenuOption = {
-        // label: route.meta?.title
-        //   ? () => h(RouterLink, { to: { name: route.name || 'Root' } }, { default: () => route.meta?.title })
-        //   : '-',
         label: (route.meta?.title as string) || '-',
         key: route.meta?.key as string,
         routeName: route.name as string,
-        // icon: route.meta?.icon ? () => h('i', { class: `iconfont ${route?.meta?.icon as string}` }) : null,
         icon: route.meta?.icon || '',
+        path: (route.path = route.path.startsWith('/') ? route.path : `${parentRoute?.path}/${route.path}`),
       }
 
       if (route.children) {
-        menuOption.children = createMenuOptions(route.children)
+        menuOption.children = createMenuOptions(route.children, route)
       }
 
       menuOptions.push(menuOption)

types/router.d.ts

@@ -5,7 +5,8 @@ export {}
 declare module 'vue-router' {
   interface RouteMeta {
     rank: number
-    title: string
+    title?: string
     icon?: string
+    hideSideMenItem?: boolean
   }
 }