当前位置：首页 > VUE

vue实现侧边栏菜单

2026-01-20 23:18:21VUE

实现侧边栏菜单的基本结构

使用Vue的模板语法构建侧边栏的基础HTML结构，通常包含一个<div>容器和嵌套的<ul>列表。菜单项通过v-for动态渲染，数据驱动视图。

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

定义菜单数据

在Vue组件的data或script setup中定义菜单数据数组，包含标题、路径等字段。推荐使用响应式API（如ref或reactive）管理状态。

vue实现侧边栏菜单

<script>
export default {
  data() {
    return {
      menuItems: [
        { id: 1, title: '首页', path: '/' },
        { id: 2, title: '产品', path: '/products' },
        { id: 3, title: '关于', path: '/about' }
      ]
    }
  }
}
</script>

添加样式与交互效果

通过CSS为侧边栏添加宽度、背景色等基础样式，利用Vue的v-show或v-if控制菜单展开/折叠状态。过渡动画可使用Vue的<transition>组件。

<style scoped>
.sidebar {
  width: 250px;
  background-color: #2c3e50;
  min-height: 100vh;
  transition: all 0.3s;
}
.sidebar.collapsed {
  width: 60px;
}
.sidebar ul li a {
  color: white;
  padding: 10px;
  display: block;
}
</style>

集成路由功能

若使用Vue Router，通过<router-link>实现导航。动态高亮当前路由可结合router-link-active类或route.matched判断。

vue实现侧边栏菜单

<li v-for="item in menuItems" :key="item.id">
  <router-link 
    :to="item.path" 
    :class="{ 'active': $route.path === item.path }"
  >
    {{ item.title }}
  </router-link>
</li>

响应式折叠控制

添加折叠按钮，通过Vue的响应式数据（如isCollapsed）和事件绑定实现侧边栏的展开/折叠功能。

<button @click="isCollapsed = !isCollapsed">
  {{ isCollapsed ? '展开' : '折叠' }}
</button>
<div class="sidebar" :class="{ 'collapsed': isCollapsed }">
  <!-- 菜单内容 -->
</div>

嵌套子菜单支持

对于多级菜单，使用递归组件或嵌套v-for渲染子菜单。通过v-show控制子菜单的显示隐藏。

<li v-for="item in menuItems" :key="item.id">
  <div @click="item.expanded = !item.expanded">
    {{ item.title }}
    <span v-if="item.children">{{ item.expanded ? '−' : '+' }}</span>
  </div>
  <ul v-show="item.expanded" v-if="item.children">
    <li v-for="child in item.children" :key="child.id">
      <router-link :to="child.path">{{ child.title }}</router-link>
    </li>
  </ul>
</li>