vue admin template 如何控制导航菜单的显示隐藏

Vue Admin Template 的导航菜单是通过路由配置来控制显示和隐藏的。具体来说，可以在路由配置文件中设置 `meta` 属性来指定当前路由所对应的菜单是否需要显示。例如：

{
  path: '/dashboard',
  component: Dashboard,
  name: 'Dashboard',
  meta: {
    requiresAuth: true, // 是否需要登录才能访问
    menu: true, // 是否显示在导航菜单中
    iconClass: 'el-icon-s-home' // 菜单图标
  }
}

在导航菜单组件中，可以通过遍历路由配置文件来动态渲染菜单，并根据 `meta.menu` 属性来判断是否需要显示当前菜单项。例如：

<template>
  <div class="sidebar-menu">
    <el-menu
      :default-active="$route.path"
      :collapse="isCollapse"
      :unique-opened="true"
      router
      :collapse-transition="false"
      class="el-menu-vertical-demo"
    >
      <template v-for="item in menuList">
        <sidebar-menu-item :item="item" :key="item.path"></sidebar-menu-item>
      </template>
    </el-menu>
  </div>
</template>

<script>
import routes from '@/router/routes'

export default {
  name: 'SidebarMenu',
  data() {
    return {
      menuList: []
    }
  },
  created() {
    this.menuList = this.filterMenu(routes)
  },
  methods: {
    filterMenu(routes) {
      return routes.filter(route => {
        if (route.meta && route.meta.menu) {
          if (route.children) {
            route.children = this.filterMenu(route.children)
          }
          return true
        }
        return false
      })
    }
  }
}
</script>

在上面的代码中，`filterMenu` 方法会递归遍历路由配置文件，根据 `meta.menu` 属性来筛选出需要显示的菜单项，并将其存储到 `menuList` 中。然后在模板中通过遍历 `menuList` 来动态渲染菜单。