vue3左侧菜单隐藏某选项

根据router显示左侧菜单栏隐藏某个菜单选项

在写k8s管理平台的时候遇到一个问题，我的左侧菜单栏是通过route路径获取的

<el-menu class="aside-menu"
         router
         :default-active="$route.path"
         :collapse="isCollapse"
         background-color="#131b27"
         text-color="#bfcbd9"
         active-text-color="#20a0ff">

下面是我router目录下index.js的路由

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/login',
      name: 'login',
      component: LoginView,
      meta: {},
    },
    {
      path: '/',
      redirect: '/Summary',
      meta: {},

    },
    {
      path: "/Summary",
      icon: "odometer",
      component:HomeView,
      meta: {},
      children:[
        {
          icon: "odometer",
          path: "/Summary",
          name: '概要',
          meta: {title: "概要", requireAuth: true},
          component: () => import('../views/Summary/SummaryView.vue'),
        }
      ]
    },
    {
      path: '/workflow',
      component:HomeView,
      icon: "VideoPlay",
      meta: {},
      children: [
        {
          path: "/workflow",
          name: "工作流",
          icon: "VideoPlay",
          meta: {title: "工作流", requireAuth: true},
          component: () => import('../views/workflow/workflowView.vue'),
        }
      ]
    },
    {
      path: "/cluster",
      name: "集群",
      component:HomeView,
      icon: "home-filled",
      meta: {title: "集群", requireAuth: true},
      children: [
        {
          path: "/cluster/node",
          name: "Node",
          icon: "el-icon-s-data",
          meta: {title: "Node", requireAuth: true},
          component: () => import("@/views/cluster/nodeView.vue")
        },
        {
          path: "/cluster/namespace",
          name: "Namespace",
          icon: "el-icon-document-add",
          meta: {title: "创建namespace", requireAuth: true},
          component: () => import("@/views/cluster/namespaceView.vue"),
        },
      ]
    },
    {
      path: "/workload",
      name: "工作负载",
      component:HomeView,
      icon: "menu",
      meta: {title: "工作负载", requireAuth: true},
      children: [
        {
          path: "/workload/deployment",
          name: "Deployment",
          icon: "el-icon-s-data",
          meta: {title: "Deployment", requireAuth: true},
          component: () => import("@/views/workload/deploymentView.vue"),
        },

        {
          path: "pod/:type/:deploymentName/:namespace",
          name: "Pod",
          icon: "el-icon-document-add",
          meta: {title: "Pod", requireAuth: true,hidden: true},
          props: true,
          component: () => import("@/views/workload/podView.vue")
        },
        {
          path: "/workload/deamonset",
          name: "DaemonSet",
          icon: "el-icon-document-add",
          meta: {title: "DaemonSet", requireAuth: true},
          component: () => import("@/views/workload/daemonsetView.vue")
        },
        {
          path: "/workload/statefulset",
          name: "StatefulSet",
          icon: "el-icon-document-add",
          meta: {title: "DaemonSets", requireAuth: true},
          component: () => import("@/views/workload/statefulsetView.vue")
        }
      ]
    },
    {
      path: "/loadbalance",
      name: "负载均衡",
      component:HomeView,
      icon: "files",
      meta: {title: "负载均衡", requireAuth: true},
      children: [
        {
          path: "/loadbalance/service",
          name: "Service",
          icon: "el-icon-s-data",
          meta: {title: "Service", requireAuth: true},
          component: () => import("@/views/loadbalance/serviceView.vue")
        },
        {
          path: "/loadbalance/ingress",
          name: "Ingress",
          icon: "el-icon-document-add",
          meta: {title: "Ingress", requireAuth: true},
          component: () => import("@/views/loadbalance/ingressView.vue")
        }
      ]
    },
    {
      path: "/storage",
      name: "存储与配置",
      component:HomeView,
      icon: "tickets",
      meta: {title: "存储与配置", requireAuth: true},
      children: [
        {
          path: "/storage/configmap",
          name: "Configmap",
          icon: "el-icon-document-add",
          meta: {title: "Configmap", requireAuth: true},
          component: () => import("@/views/storage/configmapView.vue")
        },
        {
          path: "/storage/secret",
          name: "Secret",
          icon: "el-icon-document-add",
          meta: {title: "Secret", requireAuth: true},
          component: () => import("@/views/storage/secretView.vue")
        },
        {
          path: "/storage/persistentvolume",
          name: "PersistentVolume",
          icon: "el-icon-document-add",
          meta: {title: "PersistemtVolume", requireAuth: true},
          component: () => import("@/views/storage/persistentvolumeView.vue")
        },
        {
          path: "/storage/persistentvolumeclaim",
          name: "PersistentVolumeClaim",
          icon: "el-icon-s-data",
          meta: {title: "PersistentVolumeClaim", requireAuth: true},
          component: () => import("@/views/storage/persistentvolumeClainView.vue")
        },

      ]
    },
    {
      path: "/users",
      name: "用户管理",
      component:HomeView,
      icon: "avatar",
      meta: {title: "存储与配置", requireAuth: true},
      children: [
        {
          path: "/users/user",
          name: "用户",
          icon: "el-icon-document-add",
          meta: {title: "用户", requireAuth: true},
          component: () => import("@/views/user/userView.vue")
        },
        {
          path: "user/:id",
          name: "userDetail",
          icon: "el-icon-document-add",
          meta: {title: "用户详情", requireAuth: true,hidden: true},
          props: true,
          component: () => import("@/views/user/userInfoView.vue")
        },
        {
          path: "/user/group",
          name: "用户组",
          icon: "el-icon-document-add",
          meta: {title: "用户组", requireAuth: true},
          component: () => import("@/views/user/groupView.vue")
        },
        {
          path: "/user/settings",
          name: "用户设置",
          icon: "el-icon-s-data",
          meta: {title: "用户设置", requireAuth: true},
          component: () => import("@/views/user/userSetView.vue")
        },
      ]
    },
    {
      path: '/404',
      component: () => import('@/views/common/404.vue'),
      meta: {
        title: '404'
      }
    },
    {
      path: '/403',
      component: () => import('@/views/common/403.vue'),
      meta: {
        title: '403'
      }
    },
    //其他路径跳转至404页面
    {
      path: '/:pathMatch(.*)',
      redirect: '/404'
    },
  ]
})

而如果我想让左侧菜单栏不显示某些路由呢？网上找了很多方法都不起作用，终于根据下面的方法成功了。注意，要在router路由中添加hidden属性如：meta: {title: “Pod”, requireAuth: true,hidden: true},

function filterRoutes(routes) {
  return routes
      .filter((r) => !r.meta?.hidden)
      .map((r) => {
        if (r.children && r.children.length) {
          return {
            ...r,
            children: filterRoutes(r.children)
          };
        }
        return r;
      });
}
const filteredRouters = computed(() => filterRoutes(routers.value));