主要是控制某些路由不用渲染成菜单，比如login 404 401等路由

默认hidden就是false 显示在菜单
image.png
image.png

菜单不显示 documentation hidden: true
image.png
效果图
image.png

2-1 SidebarItem组件修改

主要是在渲染菜单项前 根据route.meta.hidden属性进行筛选，将hidden为true 的筛选出去 不进行菜单渲染 image.png

  1. <template>
  2.   <div
  3.     v-if="!item.meta || !item.meta.hidden"
  4.     class="sidebar-item-container"
  5.   >
  6.     <!-- 只渲染一个路由 并且路由只有一个子路由时直接渲染这个子路由 -->
  7.     <template
  8.       v-if="theOnlyOneChildRoute && (!theOnlyOneChildRoute.children || theOnlyOneChildRoute.noShowingChildren)"
  9.     >
  10.       <sidebar-item-link
  11.         v-if="theOnlyOneChildRoute.meta"
  12.         :to="resolvePath(theOnlyOneChildRoute.path)"
  13.       >
  14.         <el-menu-item
  15.           :index="resolvePath(theOnlyOneChildRoute.path)"
  16.         >
  17.           <svg-icon
  18.             v-if="icon"
  19.             class="menu-icon"
  20.             :icon-class="icon"
  21.           ></svg-icon>
  22.           <template #title>
  23.             <span>{{ theOnlyOneChildRoute.meta.title }}</span>
  24.           </template>
  25.         </el-menu-item>
  26.       </sidebar-item-link>
  27.     </template>
  28.     <!-- 有多个子路由时 -->
  29.     <el-submenu
  30.       v-else
  31.       :index="resolvePath(item.path)"
  32.       popper-append-to-body
  33.     >
  34.       <template #title>
  35.         <svg-icon
  36.           v-if="item.meta.icon"
  37.           class="menu-icon"
  38.           :icon-class="item.meta.icon"
  39.         ></svg-icon>
  40.         <span class="submenu-title">{{ item.meta.title }}</span>
  41.       </template>
  42.       <sidebar-item
  43.         v-for="child in item.children"
  44.         :key="child.path"
  45.         :is-nest="true"
  46.         :item="child"
  47.         :base-path="resolvePath(child.path)"
  48.       >
  49.       </sidebar-item>
  50.     </el-submenu>
  51.   </div>
  52. </template>
  54. <script lang="ts">
  55. import path from 'path'
  56. import { defineComponent, PropType, computed, toRefs } from 'vue'
  57. import { RouteRecordRaw } from 'vue-router'
  58. import SidebarItemLink from './SidebarItemLink.vue'
  59. import { isExternal } from '@/utils/validate'
  61. export default defineComponent({
  62.   name: 'SidebarItem',
  63.   components: {
  64.     SidebarItemLink
  65.   },
  66.   props: {
  67.     item: {
  68.       type: Object as PropType<RouteRecordRaw>,
  69.       required: true
  70.     },
  71.     basePath: {
  72.       type: String,
  73.       required: true
  74.     }
  75.   },
  76.   setup (props) {
  77.     const { item } = toRefs(props)
  79.     // 子路由数量
  80.     const showingChildNumber = computed(() => {
  81.       const children = (props.item.children || []).filter(child => {
  82.         // hidden属性控制路由是否渲染成菜单 像login 401 404等路由都不需要渲染成菜案
  83.         if (child.meta && child.meta.hidden) return false
  84.         return true
  85.       })
  86.       return children.length
  87.     })
  89.     // 只有一个可渲染的子路由直接渲染这个子路由 （由于我们有的路由 layout布局组件是一级路由 二级路由才是我们要渲染成菜单）
  90.     const theOnlyOneChildRoute = computed(() => {
  91.       // 多个children
  92.       if (showingChildNumber.value > 1) {
  93.         return null
  94.       }
  96.       // 子路由只有一个时 并且做个hidden筛选 children是数组类型 所以循环下
  97.       if (item.value.children) {
  98.         for (const child of item.value.children) {
  99.           // hidden属性控制路由是否渲染成菜单 像login 401 404等路由都不需要渲染成菜单
  100.           if (!child.meta || !child.meta.hidden) {
  101.             return child
  102.           }
  103.         }
  104.       }
  106.       // showingChildNumber === 0
  107.       // 没有可渲染chiildren时 就渲染当前父路由item 可能children都是hidden或没有
  108.       return {
  109.         ...props.item,
  110.         path: '', // resolvePath避免resolve拼接时 拼接重复
  111.         noShowingChildren: true // 无可渲染chiildren
  112.       }
  113.     })
  115.     // menu icon
  116.     const icon = computed(() => {
  117.       // 子路由 如果没有icon就用父路由的
  118.       return theOnlyOneChildRoute.value?.meta?.icon || (props.item.meta && props.item.meta.icon)
  119.     })
  121.     // 拼接路径 父路径+子路径
  122.     const resolvePath = (childPath: string) => {
  123.       // 如果是带协议外链 直接返回
  124.       if (isExternal(childPath)) {
  125.         return childPath
  126.       }
  127.       // 如果不是外链 需要和basePath拼接
  128.       return path.resolve(props.basePath, childPath)
  129.     }
  131.     return {
  132.       theOnlyOneChildRoute,
  133.       icon,
  134.       resolvePath
  135.     }
  136.   }
  137. })
  138. </script>
  140. <style lang="scss">
  141. .sidebar-item-container {
  142.   .menu-icon {
  143.     margin-right: 16px;
  144.     margin-left: 5px;
  145.     vertical-align: middle;
  146.   }
  147. }
  148. </style>

2-2 路由表里设置hidden

image.png

本节参考源码

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