当前位置：首页 > VUE

vue实现设置菜单

2026-02-20 02:28:50VUE

Vue 实现设置菜单的方法

使用 Vue Router 和动态组件

在 Vue 项目中可以通过 Vue Router 实现设置菜单的路由跳转。创建一个 Settings.vue 组件作为父组件，内部使用动态组件或嵌套路由展示不同设置项。

<template>
  <div class="settings-container">
    <div class="menu">
      <router-link to="/settings/profile">个人资料</router-link>
      <router-link to="/settings/account">账户安全</router-link>
    </div>
    <div class="content">
      <router-view></router-view>
    </div>
  </div>
</template>

使用状态管理（Vuex/Pinia）

通过状态管理存储当前选中的菜单项，动态渲染对应内容。

vue实现设置菜单

<template>
  <div>
    <div class="menu">
      <button @click="setActiveTab('profile')">个人资料</button>
      <button @click="setActiveTab('account')">账户安全</button>
    </div>
    <div class="content">
      <ProfileSettings v-if="activeTab === 'profile'"/>
      <AccountSettings v-else-if="activeTab === 'account'"/>
    </div>
  </div>
</template>

<script>
import { useSettingsStore } from '@/stores/settings'

export default {
  setup() {
    const settingsStore = useSettingsStore()
    return {
      activeTab: settingsStore.activeTab,
      setActiveTab: settingsStore.setActiveTab
    }
  }
}
</script>

响应式菜单设计

使用 CSS Flexbox/Grid 实现响应式布局，适配不同屏幕尺寸。

vue实现设置菜单

.settings-container {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 20px;
}

@media (max-width: 768px) {
  .settings-container {
    grid-template-columns: 1fr;
  }
}

可折叠菜单实现

通过 Vue 的 v-show 或 CSS transition 实现菜单折叠效果。

<template>
  <div>
    <button @click="isMenuOpen = !isMenuOpen">
      {{ isMenuOpen ? '收起菜单' : '展开菜单' }}
    </button>
    <div class="menu-items" v-show="isMenuOpen">
      <!-- 菜单项内容 -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isMenuOpen: false
    }
  }
}
</script>

权限控制菜单项

根据用户权限动态渲染可访问的菜单项。

<template>
  <div class="menu">
    <template v-for="item in menuItems" :key="item.name">
      <router-link 
        v-if="hasPermission(item.requiredRole)"
        :to="item.path"
      >
        {{ item.name }}
      </router-link>
    </template>
  </div>
</template>

<script>
export default {
  computed: {
    menuItems() {
      return [
        { name: '系统设置', path: '/admin/settings', requiredRole: 'admin' },
        { name: '个人设置', path: '/settings', requiredRole: 'user' }
      ]
    }
  },
  methods: {
    hasPermission(requiredRole) {
      return this.user.roles.includes(requiredRole)
    }
  }
}
</script>