vue后台管理系统控制导航菜单显示隐藏

可以使用Vue的条件渲染指令`v-if`或者`v-show`来实现控制导航菜单的显示和隐藏。

方法一：使用v-if指令
在Vue组件中，可以根据某个变量的值来控制是否渲染某个元素。例如，可以在页面上定义一个`hasPermission`的变量，用来表示当前用户是否有查看某个菜单的权限，然后使用`v-if`指令来控制该菜单是否显示。

<template>
  <div>
    <nav>
      <ul>
        <li>首页</li>
        <li v-if="hasPermission">菜单1</li>
        <li v-if="hasPermission">菜单2</li>
        <li>菜单3</li>
      </ul>
    </nav>
  </div>
</template>

<script>
export default {
  data() {
    return {
      hasPermission: true // 根据实际情况判断用户是否有权限
    }
  }
}
</script>

方法二：使用v-show指令
`v-show`是另一种控制元素显示和隐藏的方式，与`v-if`不同的是，`v-show`仅仅是控制元素的CSS属性`display`的值，而不是从DOM树中完全移除元素。因此，使用`v-show`可以避免频繁的DOM操作，提高页面渲染性能。同样，可以使用`v-show`来控制导航菜单的显示和隐藏。

<template>
  <div>
    <nav>
      <ul>
        <li>首页</li>
        <li v-show="hasPermission">菜单1</li>
        <li v-show="hasPermission">菜单2</li>
        <li>菜单3</li>
      </ul>
    </nav>
  </div>
</template>

<script>
export default {
  data() {
    return {
      hasPermission: true // 根据实际情况判断用户是否有权限
    }
  }
}
</script>