本节目标
image.png
点击收起
image.png

这里菜单渲染 暂时使用router/index.ts里的路由表 路由表里meta里面需要提供title icon 作为菜单项信息，icon是我们自己的svg文件名称

image.png

2-1 Sidebar导入路由表

sidebar组件导入路由表，根据routes循环SidebarItem组件

image.png

  1. <template>
  2.   <div>
  3.     <!-- 测试展开收起 -->
  4.     <h6 @click="isCollapse=!isCollapse">展收测试</h6>
  5.     <el-menu
  6.       class="sidebar-container-menu"
  7.       mode="vertical"
  8.       router
  9.       :default-active="activeMenu"
  10.       :background-color="scssVariables.menuBg"
  11.       :text-color="scssVariables.menuText"
  12.       :active-text-color="scssVariables.menuActiveText"
  13.       :collapse="isCollapse"
  14.       :collapse-transition="true"
  15.     >
  16.       <sidebar-item
  17.         v-for="route in menuRoutes"
  18.         :key="route.path"
  19.         :item="route"
  20.         :base-path="route.path"
  21.       />
  22.     </el-menu>
  23.   </div>
  24. </template>
  26. <script lang="ts">
  27. import { defineComponent, computed, ref } from 'vue'
  28. import { useRoute } from 'vue-router'
  29. import variables from '@/styles/variables.scss'
  30. // 导入路由表
  31. import { routes } from '@/router'
  32. import SidebarItem from './SidebarItem.vue'
  34. export default defineComponent({
  35.   name: 'Sidebar',
  36.   components: {
  37.     SidebarItem
  38.   },
  39.   setup() {
  40.     const route = useRoute() // 等价于 this.$route
  41.     // 根据路由路径 对应 当前激活的菜单
  42.     const activeMenu = computed(() => {
  43.       const { path } = route
  44.       return path
  45.     })
  46.     // scss变量
  47.     const scssVariables = computed(() => variables)
  48.     // 展开收起状态 稍后放store
  49.     const isCollapse = ref(false)
  51.     // 渲染路由
  52.     const menuRoutes = computed(() => routes)
  54.     return {
  55.       // 不有toRefs原因 缺点在这里 variables里面变量属性感觉来源不明确 不知道有哪些变量值
  56.       // ...toRefs(variables), 
  57.       scssVariables,
  58.       isCollapse,
  59.       activeMenu,
  60.       menuRoutes
  61.     }
  62.   }
  63. })
  64. </script>

2-2 实现SidebarItem组件

  1. <template>
  2.   <div class="sidebar-item-container">
  3.     <!-- 一个路由下只有一个子路由的时候 只渲染这个子路由 -->
  4.     <template
  5.       v-if="theOnlyOneChildRoute && !theOnlyOneChildRoute.children"
  6.     >
  7.       <el-menu-item
  8.         :index="resolvePath(theOnlyOneChildRoute.path)"
  9.       >
  10.         <svg-icon
  11.           v-if="icon"
  12.           class="menu-icon"
  13.           :icon-class="icon"
  14.         ></svg-icon>
  15.         <template #title>
  16.           <span>{{ theOnlyOneChildRoute.meta.title }}</span>
  17.         </template>
  18.       </el-menu-item>
  19.     </template>
  20.     <!-- 多个子路由时 -->
  21.     <el-submenu
  22.       v-else
  23.       :index="resolvePath(item.path)"
  24.       popper-append-to-body
  25.     >
  26.       <template #title>
  27.         <svg-icon
  28.           v-if="item.meta.icon"
  29.           class="menu-icon"
  30.           :icon-class="item.meta.icon"
  31.         ></svg-icon>
  32.         <span class="submenu-title">{{ item.meta.title }}</span>
  33.       </template>
  34.       <sidebar-item
  35.         v-for="child in item.children"
  36.         :key="child.path"
  37.         :is-nest="true"
  38.         :item="child"
  39.         :base-path="resolvePath(child.path)"
  40.       >
  41.       </sidebar-item>
  42.     </el-submenu>
  43.   </div>
  44. </template>
  46. <script lang="ts">
  47. import { defineComponent, PropType, computed, toRefs } from 'vue'
  48. import { RouteRecordRaw } from 'vue-router'
  49. import path from 'path'
  51. export default defineComponent({
  52.   name: 'SidebarItem',
  53.   props: {
  54.     item: { // 当前路由（此时的父路由）
  55.       type: Object as PropType<RouteRecordRaw>,
  56.       required: true
  57.     },
  58.     basePath: { // 父路由路径（子路由路径如果是相对的 要基于父路径）
  59.       type: String,
  60.       required: true
  61.     }
  62.   },
  63.   setup (props) {
  64.     const { item } = toRefs(props)
  66.     // 渲染菜单主要先看子路由
  67.     // 比如我们的路由 一级路由一般都是layout组件 二级路由才是我们考虑要渲染成菜单的
  69.     // 子路由数量
  70.     const showingChildNumber = computed(() => {
  71.       // hidden路由排除掉 只算可渲染子路由
  72.       const children = (props.item.children || []).filter(child => {
  73.         if (child.meta && child.meta.hidden) return false
  74.         return true
  75.       })
  76.       return children.length
  77.     })
  79.     // 要渲染的单个路由 如果该路由只有一个子路由 默认直接渲染这个子路由 
  80.     // theOnlyOneChildRoute直接通过el-menu-item组件来渲染
  81.     const theOnlyOneChildRoute = computed(() => {
  82.       // 多个children时 直接return null 多children需要用el-submenu来渲染并递归
  83.       if (showingChildNumber.value > 1) {
  84.         return null
  85.       }
  87.       // 只有一个子路由 还要筛选路由meta里有无hidden属性 hidden：true则过滤出去 不用管
  88.       // 路由meta里我们会配置hidden属性表示不渲染成菜单，比如login 401 404页面是不渲染成菜单的
  89.       if (item.value.children) {
  90.         for (const child of item.value.children) {
  91.           if (!child.meta || !child.meta.hidden) {
  92.             return child
  93.           }
  94.         }
  95.       }
  97.       // showingChildNumber === 0 无可渲染的子路由 （可能有子路由 hidden属性为true）
  98.       // 无可渲染chiildren时 把当前路由item作为仅有的子路由渲染
  99.       return {
  100.         ...props.item,
  101.         path: '' // resolvePath避免resolve拼接时 拼接重复
  102.       }
  103.     })
  105.     // menu icon
  106.     const icon = computed(() => {
  107.       // 子路由 如果没有icon就用父路由的
  108.       return theOnlyOneChildRoute.value?.meta?.icon || (props.item.meta && props.item.meta.icon)
  109.     })
  111.     // 利用path.resolve 根据父路径+子路径 解析成正确路径 子路径可能是相对的
  112.     // resolvePath在模板中使用
  113.     const resolvePath = (childPath: string) => {
  114.       return path.resolve(props.basePath, childPath)
  115.     }
  117.     return {
  118.       theOnlyOneChildRoute,
  119.       icon,
  120.       resolvePath
  121.     }
  122.   }
  123. })
  124. </script>
  126. <style lang="scss">
  127. .sidebar-item-container {
  128.   .menu-icon { // icon样式调整
  129.     margin-right: 16px;
  130.     margin-left: 5px;
  131.     vertical-align: middle;
  132.   }
  133. }
  134. </style>

2-3 sidebar css样式调整

src/styles/sidebar.scss
image.png

  1. #app {
  3.   .sidebar-container {
  4.     height: 100%;
  5.     background-color: $menuBg;
  7.     // menu未收起时样式
  8.     &-menu:not(.el-menu--collapse) {
  9.       width: $sideBarWidth;
  10.     }
  12.     // 菜单收起时的样式调整
  13.     .el-menu--collapse {
  14.       // 隐藏submenu title
  15.       .submenu-title {
  16.         display: none;
  17.       }
  18.     }
  20.     .el-submenu {
  21.       .el-menu {
  22.         .el-menu-item {
  23.           background-color: $subMenuBg !important;
  24.           &:hover {
  25.             background-color: $subMenuHover !important;
  26.           }
  27.         }
  28.       }
  29.     }
  31.     .el-menu {
  32.       border: none;
  33.     }
  34.   }
  35. }

2-4 路由表里icon和title

路由表里 icon 和title名称大家改改试试

  1. import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
  2. import Layout from '@/layout/index.vue'
  4. // 看作是异步获取路由
  5. export const asyncRoutes: Array<RouteRecordRaw> = [
  6.   {
  7.     path: '/documentation',
  8.     component: Layout, // 布局组件作为一级路由
  9.     redirect: '/documentation/index',
  10.     children: [
  11.       {
  12.         path: '/documentation/index',
  13.         name: 'Documentation',
  14.         component: () => import(/* webpackChunkName: "documentation" */ '@/views/documentation/index.vue'),
  15.         meta: {
  16.           title: 'Documentation',
  17.           icon: 'documentation'
  18.         }
  19.       }
  20.     ]
  21.   },
  22.   {
  23.     path: '/guide',
  24.     component: Layout,
  25.     redirect: '/guide/index',
  26.     children: [
  27.       {
  28.         path: 'index',
  29.         name: 'Guide',
  30.         component: () => import(/* webpackChunkName: "guide" */ '@/views/guide/index.vue'),
  31.         meta: {
  32.           title: 'Guide',
  33.           icon: 'guide'
  34.         }
  35.       }
  36.     ]
  37.   },
  38.   {
  39.     path: '/system',
  40.     component: Layout,
  41.     redirect: '/system/user',
  42.     meta: {
  43.       title: 'System',
  44.       icon: 'lock'
  45.     },
  46.     children: [
  47.       {
  48.         path: 'menu',
  49.         component: () => import(/* webpackChunkName: "menu" */ '@/views/system/menu.vue'),
  50.         meta: {
  51.           title: 'Menu Management'
  52.         }
  53.       },
  54.       {
  55.         path: 'role',
  56.         component: () => import(/* webpackChunkName: "role" */ '@/views/system/role.vue'),
  57.         meta: {
  58.           title: 'Role Management'
  59.         }
  60.       },
  61.       {
  62.         path: 'user',
  63.         component: () => import(/* webpackChunkName: "user" */ '@/views/system/user.vue'),
  64.         meta: {
  65.           title: 'User Management'
  66.         }
  67.       }
  68.     ]
  69.   }
  70. ]
  72. export const constantRoutes: Array<RouteRecordRaw> = [
  73.   {
  74.     path: '/',
  75.     component: Layout,
  76.     redirect: '/dashboard',
  77.     children: [
  78.       {
  79.         path: 'dashboard',
  80.         name: 'Dashboard',
  81.         component: () => import(/* webpackChunkName: "dashboard" */ '@/views/dashboard/index.vue'),
  82.         meta: {
  83.           title: 'Dashboard',
  84.           icon: 'dashboard'
  85.         }
  86.       }
  87.     ]
  88.   }
  89. ]
  91. export const routes = [
  92.   ...constantRoutes,
  93.   ...asyncRoutes
  94. ]
  96. const router = createRouter({
  97.   history: createWebHashHistory(),
  98.   routes
  99. })
  101. export default router

本节参考源码

https://gitee.com/brolly/vue3-element-admin/commit/053e7956eb2a09ac218863b57a203a7fcae0fbec

现在后不够完善继续