vue控制路由和菜单显示隐藏

要实现Vue控制路由和菜单的显示和隐藏，可以使用Vue Router和Vue组件的结合。以下是一个简单的实现方法：

1. 在Vue Router中定义路由时，可以添加meta字段用于存储路由的一些元数据，如是否需要在菜单中显示。

const router = new VueRouter({
  routes: [
    {
      path: '/',
      component: Home,
      meta: {
        showInMenu: true  // 是否在菜单中显示
      }
    },
    {
      path: '/about',
      component: About,
      meta: {
        showInMenu: false
      }
    }
  ]
})

2. 在菜单组件中，根据路由的meta字段判断是否需要显示该路由。

<template>
  <div>
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
  </div>
</template>

<script>
export default {
  computed: {
    menuRoutes() {
      // 过滤出需要在菜单中显示的路由
      return this.$router.options.routes.filter(route => route.meta.showInMenu)
    }
  }
}
</script>

3. 在主组件中，使用Vue Router的`beforeEach`钩子函数来控制路由的显示和隐藏。

router.beforeEach((to, from, next) => {
  // 显示菜单中的路由
  const showRoutes = router.options.routes.filter(route => route.meta.showInMenu)
  showRoutes.forEach(route => route.hidden = false)

  // 隐藏不需要显示的路由
  const hideRoutes = router.options.routes.filter(route => !route.meta.showInMenu)
  hideRoutes.forEach(route => route.hidden = true)

  next()
})

这样就可以实现根据路由的meta字段来控制路由和菜单的显示和隐藏了。