diff --git a/src/layouts/components/Sidebar/SidebarItem.vue b/src/layouts/components/Sidebar/SidebarItem.vue
index 938f3fc4..5f829e4a 100644
--- a/src/layouts/components/Sidebar/SidebarItem.vue
+++ b/src/layouts/components/Sidebar/SidebarItem.vue
@@ -60,10 +60,7 @@ const resolvePath = (routePath: string) => {
 </script>
 
 <template>
-  <div
-    v-if="!props.item.meta?.hidden"
-    :class="{ 'simple-mode': props.isCollapse && !isTop, 'first-level': props.isFirstLevel }"
-  >
+  <div :class="{ 'simple-mode': props.isCollapse && !isTop, 'first-level': props.isFirstLevel }">
     <template v-if="!alwaysShowRootMenu && theOnlyOneChild && !theOnlyOneChild.children">
       <SidebarItemLink v-if="theOnlyOneChild.meta" :to="resolvePath(theOnlyOneChild.path)">
         <el-menu-item :index="resolvePath(theOnlyOneChild.path)">
diff --git a/src/layouts/components/Sidebar/index.vue b/src/layouts/components/Sidebar/index.vue
index fc6a4d4b..8f3f1ac5 100644
--- a/src/layouts/components/Sidebar/index.vue
+++ b/src/layouts/components/Sidebar/index.vue
@@ -29,7 +29,7 @@ const activeMenu = computed(() => {
   } = route
   return activeMenu ? activeMenu : path
 })
-
+const noHiddenRoutes = computed(() => permissionStore.routes.filter((item) => !item.meta?.hidden))
 const isCollapse = computed(() => !sidebar.value.opened)
 const isLeft = computed(() => layoutMode.value === "left")
 const isTop = computed(() => layoutMode.value === "top")
@@ -68,7 +68,7 @@ const hiddenScrollbarVerticalBar = computed(() => {
         :mode="isTop && !isMobile ? 'horizontal' : 'vertical'"
       >
         <SidebarItem
-          v-for="route in permissionStore.routes"
+          v-for="route in noHiddenRoutes"
           :key="route.path"
           :item="route"
           :base-path="route.path"