当前位置：首页 > VUE

vue实现左侧菜单

2026-01-16 02:00:04VUE

实现左侧菜单的基本结构

在Vue中实现左侧菜单通常需要结合组件化思想和路由功能。使用<el-menu>组件（Element UI）或自定义组件搭配Vue Router是常见方案。

<template>
  <div class="menu-container">
    <el-menu
      default-active="1"
      class="el-menu-vertical"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b">
      <el-submenu index="1">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>导航一</span>
        </template>
        <el-menu-item index="1-1">选项1</el-menu-item>
        <el-menu-item index="1-2">选项2</el-menu-item>
      </el-submenu>
    </el-menu>
  </div>
</template>

动态生成菜单数据

通过v-for循环渲染菜单项，数据通常来自后端API或本地配置。建议将菜单数据存储在Vuex或组件data中。

data() {
  return {
    menuItems: [
      {
        title: '首页',
        icon: 'el-icon-menu',
        path: '/home'
      },
      {
        title: '用户管理',
        icon: 'el-icon-user',
        children: [
          { title: '用户列表', path: '/users' }
        ]
      }
    ]
  }
}

集成路由功能

结合Vue Router实现菜单跳转，使用router-link或编程式导航。Element UI的<el-menu>可通过router属性自动处理路由。

vue实现左侧菜单

<el-menu 
  :router="true"
  :default-active="$route.path">
  <el-menu-item 
    v-for="item in flatMenu"
    :index="item.path"
    :key="item.path"
    @click="handleMenuClick(item)">
    {{ item.title }}
  </el-menu-item>
</el-menu>

处理菜单状态

需要跟踪当前激活的菜单项，可通过监听路由变化或手动设置。使用Vue的computed属性动态计算激活状态更高效。

computed: {
  activeMenu() {
    return this.$route.matched[0].path || '/'
  }
}

响应式布局处理

添加CSS媒体查询和Vue的响应式数据控制菜单折叠状态。结合<el-menu>的collapse属性可实现折叠效果。

vue实现左侧菜单

@media screen and (max-width: 768px) {
  .el-menu-vertical:not(.el-menu--collapse) {
    width: 200px;
  }
}

权限控制实现

根据用户角色过滤菜单项，可在路由守卫或菜单渲染前处理。推荐使用Vue的v-if或自定义指令控制显示。

methods: {
  filterMenu(menu) {
    return menu.filter(item => {
      return this.$hasPermission(item.meta?.permission)
    })
  }
}

持久化菜单状态

使用localStorage或Vuex持久化存储菜单的展开/折叠状态，确保页面刷新后保持一致性。

created() {
  this.isCollapse = localStorage.getItem('menuCollapse') === 'true'
},
watch: {
  isCollapse(val) {
    localStorage.setItem('menuCollapse', val)
  }
}