进行优化

src/layout/components/Sidebar/SidebarItem.vue

@@ -1,6 +1,6 @@
 <template>
   <template v-if="!item.hidden">
-    <template v-if="hasOneShowingChild(item.children,item)">
+    <template v-if="!item.alwaysShow&&hasOneShowingChild(item.children,item)">
       <app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path)">
         <el-menu-item :index="resolvePath(onlyOneChild.path)">
           <el-icon :size="20">
@@ -53,6 +53,7 @@ const hasOneShowingChild = (children = [], parent)=>{
       return true
     }
   })
+
   // 当只有一个子路由器时，默认情况下会显示该子路由器
   if (showingChildren.length === 1) {
     return true

src/layout/components/UHeader/index.vue

@@ -100,15 +100,12 @@
     switch (key){
       case 1:
         logOut()
-
-
         break;
       case 2:
         person.value.show()
         break;
     }
   }
-
   const handleCollapse = () => {
     store.commit('app/SET_COLLAPSE', isCollapse.value)
   }

src/router/index.ts

@@ -17,6 +17,13 @@ interface extendRoute {
   hidden?:boolean
 }
 
+/**
+ * alwaysShow 如果设置为true，将始终显示根菜单，无论其子路由长度如何
+ * hidden 如果“hidden:true”不会显示在侧边栏中（默认值为false）
+ *
+ */
+
+
 export const constantRoutes: Array<RouteRecordRaw&extendRoute> = [
   {
     path: '/login',
@@ -67,8 +74,10 @@ const clipboardTable = {
 const zipRoutes = {
     path: '/zip',
     component: Layout,
+    isShow:true,
     redirect: 'noRedirect',
     name: 'zip',
+    alwaysShow:true,
     meta: {
         title: 'Zip',
         icon: 'document-copy',

src/router/modules/permission.ts

@@ -7,6 +7,7 @@ const permissionRouter = {
     component: Layout,
     redirect: 'noRedirect',
     name: 'permission',
+    alwaysShow: true, // 总是显示根目录
     meta: {
         title: '权限测试页',
         icon: 'trend-charts', roles:['other']

src/views/components-demo/upload.vue

@@ -65,7 +65,7 @@
 <script setup lang="ts">
     import UUpload from '@/components/u-upload/index.vue'
     import {ElMessage} from "element-plus";
-    import TwoPng from '@/assets/3.png'
+    import TwoPng from '@/assets/image/im1.jpeg'
     import {reactive, ref} from 'vue'
     const imgs  = ref([{
         url:TwoPng,
@@ -137,4 +137,4 @@
 
     display: inline-flex;
 }
-</style>
+</style>