路由优化

Author: sunshine824

src/components/GlobalHeader/LevelMenus.tsx

@@ -0,0 +1,52 @@
+import { defineComponent, ref, watch } from 'vue'
+import { RouteRecordRaw, useRoute, useRouter } from 'vue-router'
+import router from '../../router'
+
+import styles from './index.module.less'
+
+const LevelMenus = defineComponent({
+  name: 'LevelMenus',
+  props: {
+    menuLists: {
+      type: Array,
+      default: [],
+    },
+  },
+  setup(props, { slots }) {
+    const route = useRoute() // 路由实例
+
+    const router = useRouter()
+
+    const baseUrl = ref(route.path.split('/')) // 当前跳转基础路由
+
+    // 路由跳转
+    const skipTo = (item: RouteRecordRaw) => {
+      router.push(item.path)
+    }
+
+    // 监听路由变化
+    watch(route, (val) => {
+      baseUrl.value = val.path.split('/')
+    })
+
+    return () => (
+      <div class={styles['level-menus']}>
+        <ul class={styles['level-menus-list']}>
+          {(props.menuLists as RouteRecordRaw[]).map((menu) => {
+            return (
+              <li
+                onClick={skipTo.bind(this, menu)}
+                class={menu.name == baseUrl.value[1] && styles['active']}
+              >
+                <span class={`iconfont ${menu?.meta?.icon} menu-icon`}></span>
+                <span class={styles['title']}>{menu?.meta?.title}</span>
+              </li>
+            )
+          })}
+        </ul>
+      </div>
+    )
+  },
+})
+
+export default LevelMenus

src/components/GlobalHeader/Menus.tsx

@@ -11,6 +11,10 @@ const Menus = defineComponent({
       type: String,
       default: 'horizontal',
     },
+    menuLists: {
+      type: Array,
+      default: [],
+    },
   },
   setup(props, { slots }) {
     const route = useRoute()
@@ -25,23 +29,6 @@ const Menus = defineComponent({
       return []
     })
 
-    // 获取显示状态的路由
-    const menuLists = computed(() => {
-      return getMenus().filter((item) => !item?.meta?.hidden)
-    })
-
-    // 获取路由列表
-    const getMenus = () => {
-      let menuList: RouteRecordRaw[] = []
-      const routes: Array<RouteRecordRaw> = useRouter().options?.routes || []
-      routes.forEach((item) => {
-        if (item.path == '/') {
-          menuList = item.children || []
-        }
-      })
-      return menuList
-    }
-
     //  路由跳转
     const handleMenuClick = (item: { key: string }) => {
       router.push(item.key)
@@ -102,7 +89,7 @@ const Menus = defineComponent({
           style={{ lineHeight: '54px' }}
           onClick={handleMenuClick}
         >
-          {menuLists['value'].map((menu) => {
+          {(props.menuLists as RouteRecordRaw[]).map((menu) => {
             if (!menu.children || !menu.children.length) {
               return (
                 <Menu.Item key={menu.path}>

src/components/GlobalHeader/index.module.less

@@ -169,3 +169,52 @@
     }
   }
 }
+
+.level-menus {
+  height: 54px;
+  max-width: 800px;
+  margin-right: 20px;
+  .level-menus-list {
+    display: flex;
+    flex-flow: row nowrap;
+    align-items: center;
+    height: 100%;
+    margin-bottom: 0;
+    li {
+      height: 100%;
+      display: flex;
+      flex-flow: row nowrap;
+      align-items: center;
+      color: #b0b0b1;
+      font-size: 15px;
+      padding: 0 15px;
+      position: relative;
+      cursor: pointer;
+      margin: 0 5px;
+      &:hover {
+        color: #fff;
+      }
+      :global {
+        .menu-icon {
+          margin-right: 15px;
+        }
+      }
+      &::after {
+        width: 100%;
+        content: '';
+        position: absolute;
+        height: 0px;
+        bottom: 0;
+        left: 0;
+        background: #0972fe;
+      }
+      &.active {
+        background-color: rgba(54, 54, 80, 0.8) !important;
+        color: #fff;
+        &::after {
+          height: 3px;
+        }
+      }
+    }
+  }
+}

src/components/GlobalHeader/index.tsx

@@ -1,4 +1,5 @@
 import GlobalHeader from './GlobalHeader'
 import Menus from './Menus'
+import LevelMenus from './LevelMenus'
 
-export { GlobalHeader, Menus }
+export { GlobalHeader, Menus, LevelMenus }

src/layouts/LevelBasicLayout.tsx

@@ -1,19 +1,56 @@
-import { defineComponent } from 'vue'
-import { RouterView } from 'vue-router'
+import { defineComponent, computed } from 'vue'
+import { RouterView, RouteRecordRaw, useRouter, useRoute } from 'vue-router'
 import { Layout, Dropdown } from 'ant-design-vue'
-import { GlobalHeader, Menus } from '@/components/GlobalHeader'
+import { GlobalHeader, Menus, LevelMenus } from '@/components/GlobalHeader'
 
 import styles from './index.module.less'
 import UserIcon from '../assets/user.png'
 
 const LevelBasicLayout = defineComponent({
   name: 'LevelBasicLayout',
   setup() {
+    // 获取显示状态的路由
+    const menuLists = computed(() => {
+      const menus = getMenus().filter((item: any) => !item?.meta?.hidden)
+      menus.forEach((item: any) => {
+        if (item.children) {
+          // 只取第一层
+          delete item.children
+        }
+      })
+      return menus
+    })
+
+    // 获取子路由
+    const subMenuLists = computed(() => {
+      let menus: RouteRecordRaw[] = []
+      const names = useRoute().path.split('/')
+      if (names.length) {
+        getMenus().forEach((item) => {
+          if (item.name == names[1]) {
+            menus = item?.children || []
+          }
+        })
+      }
+      return menus
+    })
+
+    // 获取路由列表
+    const getMenus = () => {
+      let menuList: RouteRecordRaw[] = []
+      const routes: Array<RouteRecordRaw> = useRouter().options?.routes || []
+      routes.forEach((item) => {
+        if (item.path == '/') {
+          menuList = item.children || []
+        }
+      })
+      return JSON.parse(JSON.stringify(menuList))
+    }
     const slots = {
       content: () => (
         <>
           {/* 导航栏 */}
-          <Menus></Menus>
+          <LevelMenus menuLists={menuLists['value']}></LevelMenus>
           {/* 用户信息 */}
           <div class={styles['user-info']}>
             <Dropdown>
@@ -30,7 +67,15 @@ const LevelBasicLayout = defineComponent({
       <Layout class={styles['level-layout']}>
         <GlobalHeader v-slots={slots}></GlobalHeader>
         <div class={styles['level-content']}>
-          <div class={styles['level-sub-menu']}></div>
+          {/* 侧边子目录 */}
+          {subMenuLists['value'].length ? (
+            <div class={styles['vertical-sub-menu']}>
+              <Menus menuLists={subMenuLists['value']} mode="inline"></Menus>
+            </div>
+          ) : (
+            ''
+          )}
+          {/* 右侧内容区 */}
           <Layout.Content>
             <RouterView />
           </Layout.Content>

src/layouts/index.module.less

@@ -11,11 +11,11 @@
     flex-flow: row nowrap;
     align-items: flex-start;
     height: 100%;
-    .level-sub-menu {
+    .vertical-sub-menu {
       width: 210px;
       height: 100%;
       background: #fff;
-      margin-right: 20px;
+      padding: 20px 10px;
     }
   }
   .user-info {
@@ -70,6 +70,8 @@
   height: 100%;
   display: flex;
   flex-flow: column nowrap;
+  margin: 0 20px 10px 20px;
+  padding-bottom: 10px;
   .top-info {
     background: #f0f2f5;
     padding: 10px 10px 10px 0;
@@ -81,6 +83,5 @@
     overflow-y: auto;
     overflow-x: hidden;
     padding: 10px;
-    margin: 0 20px 10px 0;
   }
 }

src/router/index.ts

@@ -39,11 +39,13 @@ function fnAddDynamicMenuRoutes(
         },
       })
     } else if (item.list && item.list.length) {
+      const menus = fnAddDynamicMenuRoutes(item.list, [])
       routes.push({
         path: `/${item.url}`,
         name: item.url,
         component: RouteLayout,
-        children: fnAddDynamicMenuRoutes(item.list, []),
+        redirect: menus[0].path,
+        children: menus,
         meta: {
           title: item.name,
           hidden: false,