当前位置：首页 > VUE

vue实现侧边栏菜单

2026-02-21 14:56:39VUE

Vue 实现侧边栏菜单的方法

使用 Vue Router 和动态路由

在 Vue 项目中，可以通过 Vue Router 结合动态路由实现侧边栏菜单。定义一个菜单数据数组，通过 v-for 循环渲染菜单项，并根据路由跳转。

<template>
  <div class="sidebar">
    <div v-for="item in menuItems" :key="item.path" class="menu-item">
      <router-link :to="item.path">{{ item.title }}</router-link>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      menuItems: [
        { title: '首页', path: '/' },
        { title: '用户管理', path: '/users' },
        { title: '设置', path: '/settings' }
      ]
    }
  }
}
</script>

<style>
.sidebar {
  width: 200px;
  background-color: #f5f5f5;
  height: 100vh;
}
.menu-item {
  padding: 10px;
  border-bottom: 1px solid #ddd;
}
</style>

使用 Element UI 的 Menu 组件

如果项目中使用了 Element UI，可以直接使用其提供的 el-menu 组件快速实现侧边栏菜单。

<template>
  <el-menu
    :default-active="activeMenu"
    class="el-menu-vertical"
    background-color="#545c64"
    text-color="#fff"
    active-text-color="#ffd04b">
    <el-menu-item index="1" @click="$router.push('/')">
      <i class="el-icon-menu"></i>
      <span>首页</span>
    </el-menu-item>
    <el-submenu index="2">
      <template #title>
        <i class="el-icon-user"></i>
        <span>用户管理</span>
      </template>
      <el-menu-item index="2-1" @click="$router.push('/users')">用户列表</el-menu-item>
    </el-submenu>
  </el-menu>
</template>

<script>
export default {
  data() {
    return {
      activeMenu: '1'
    }
  }
}
</script>

使用递归组件实现多级菜单

对于嵌套层级较深的菜单，可以使用递归组件动态渲染。

<template>
  <div class="sidebar">
    <menu-item
      v-for="item in menuData"
      :key="item.path"
      :item="item"
    />
  </div>
</template>

<script>
import MenuItem from './MenuItem.vue'

export default {
  components: { MenuItem },
  data() {
    return {
      menuData: [
        {
          title: '首页',
          path: '/',
          children: []
        },
        {
          title: '系统管理',
          path: '/system',
          children: [
            { title: '用户管理', path: '/system/users' },
            { title: '角色管理', path: '/system/roles' }
          ]
        }
      ]
    }
  }
}
</script>

在 MenuItem.vue 中：

<template>
  <div>
    <router-link v-if="!item.children.length" :to="item.path">
      {{ item.title }}
    </router-link>
    <div v-else>
      <div>{{ item.title }}</div>
      <menu-item
        v-for="child in item.children"
        :key="child.path"
        :item="child"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: 'MenuItem',
  props: ['item']
}
</script>

结合 Vuex 管理菜单状态

如果需要跨组件共享菜单状态（如折叠/展开），可以使用 Vuex 存储菜单的展开状态。

// store.js
export default new Vuex.Store({
  state: {
    isCollapse: false
  },
  mutations: {
    toggleMenu(state) {
      state.isCollapse = !state.isCollapse
    }
  }
})

在组件中调用：

<el-menu :collapse="isCollapse">
  <!-- 菜单项 -->
</el-menu>
<button @click="$store.commit('toggleMenu')">切换菜单</button>

<script>
import { mapState } from 'vuex'

export default {
  computed: {
    ...mapState(['isCollapse'])
  }
}
</script>

响应式侧边栏

通过 CSS 媒体查询或监听窗口大小实现侧边栏的响应式折叠。

@media (max-width: 768px) {
  .sidebar {
    width: 60px;
    overflow: hidden;
  }
}

或者在 Vue 中动态计算：

vue实现侧边栏菜单

mounted() {
  window.addEventListener('resize', this.handleResize)
  this.handleResize()
},
methods: {
  handleResize() {
    this.isCollapse = window.innerWidth < 768
  }
}

以上方法可以根据项目需求灵活组合使用，实现功能完善且美观的侧边栏菜单。