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

要控制路由和菜单的显示隐藏，可以使用Vue Router和Vue.js的条件渲染功能。

使用Vue Router来定义路由和组件

import Vue from 'vue'
import Router from 'vue-router'

import Home from '@/components/Home'
import About from '@/components/About'
import Contact from '@/components/Contact'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/about',
      name: 'About',
      component: About
    },
    {
      path: '/contact',
      name: 'Contact',
      component: Contact
    }
  ]
})

在Vue组件中使用条件渲染来显示或隐藏菜单和路由

在Vue组件中，可以使用v-if或v-show指令来根据条件显示或隐藏元素。

例如，在App.vue组件中，可以使用v-if指令来根据当前路由路径显示或隐藏菜单。

<template>
  <div>
    <nav v-if="$route.path !== '/'">
      <!-- 菜单内容 -->
    </nav>
    <router-view></router-view>
  </div>
</template>

在菜单组件中，也可以使用v-if指令来根据当前路由路径高亮当前选中的菜单项。

<template>
  <nav>
    <ul>
      <li :class="{ active: $route.path === '/' }"><router-link to="/">Home</router-link></li>
      <li :class="{ active: $route.path === '/about' }"><router-link to="/about">About</router-link></li>
      <li :class="{ active: $route.path === '/contact' }"><router-link to="/contact">Contact</router-link></li>
    </ul>
  </nav>
</template>

<style>
.active {
  background-color: #ccc;
}
</style>

通过上述方式，就可以根据路由路径控制菜单和路由的显示隐藏了