vue实现侧边栏

Vue 侧边栏实现方法

基础结构搭建

使用Vue Router和动态组件可以实现一个灵活的侧边栏。以下是一个基础模板结构：

<template>
  <div class="app-container">
    <div :class="['sidebar', { 'collapsed': isCollapsed }]">
      <div class="logo">LOGO</div>
      <nav>
        <router-link 
          v-for="item in menuItems" 
          :key="item.path" 
          :to="item.path"
          active-class="active"
        >
          <i :class="item.icon"></i>
          <span v-show="!isCollapsed">{{ item.title }}</span>
        </router-link>
      </nav>
      <button @click="toggleCollapse">
        {{ isCollapsed ? '>' : '<' }}
      </button>
    </div>

    <div class="main-content">
      <router-view />
    </div>
  </div>
</template>

状态管理

通过Vue的响应式特性管理侧边栏状态：

<script>
export default {
  data() {
    return {
      isCollapsed: false,
      menuItems: [
        { path: '/', title: '首页', icon: 'el-icon-house' },
        { path: '/about', title: '关于', icon: 'el-icon-info' }
      ]
    }
  },
  methods: {
    toggleCollapse() {
      this.isCollapsed = !this.isCollapsed
    }
  }
}
</script>

样式设计

使用CSS实现过渡动画和响应式布局：

<style scoped>
.app-container {
  display: flex;
  height: 100vh;
}

.sidebar {
  width: 250px;
  background: #304156;
  transition: width 0.3s;
  position: relative;
}

.sidebar.collapsed {
  width: 64px;
}

.logo {
  height: 60px;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

nav {
  padding: 10px 0;
}

nav a {
  display: flex;
  align-items: center;
  padding: 12px 20px;
  color: #bfcbd9;
  text-decoration: none;
}

nav a:hover {
  background: #263445;
}

nav a.active {
  background: #409EFF;
  color: white;
}

nav a i {
  margin-right: 10px;
  font-size: 18px;
}

.main-content {
  flex: 1;
  overflow: auto;
  padding: 20px;
}

button {
  position: absolute;
  bottom: 20px;
  right: 20px;
  background: transparent;
  border: none;
  color: white;
  cursor: pointer;
}
</style>

进阶功能实现

对于更复杂的需求，可以考虑以下增强方案：

动态菜单加载 通过API获取菜单数据，实现权限控制：

async created() {
  try {
    const response = await axios.get('/api/menus')
    this.menuItems = response.data
  } catch (error) {
    console.error('菜单加载失败', error)
  }
}

嵌套路由配置 在router.js中配置多级路由：

const routes = [
  {
    path: '/',
    component: Layout,
    children: [
      { path: '', component: Home },
      { 
        path: 'products',
        children: [
          { path: '', component: ProductList },
          { path: ':id', component: ProductDetail }
        ]
      }
    ]
  }
]

响应式适配 添加媒体查询实现移动端适配：

@media (max-width: 768px) {
  .sidebar {
    position: fixed;
    z-index: 100;
    transform: translateX(-100%);
  }

  .sidebar.show {
    transform: translateX(0);
  }

  .main-content {
    margin-left: 0;
  }
}

组件库集成

使用Element UI或Ant Design Vue等组件库可以快速实现专业效果：

<template>
  <el-menu 
    :collapse="isCollapsed" 
    router
    background-color="#304156"
    text-color="#bfcbd9"
    active-text-color="#409EFF"
  >
    <el-menu-item index="/">
      <i class="el-icon-house"></i>
      <span>首页</span>
    </el-menu-item>
  </el-menu>
</template>

性能优化

对于大型应用，可以采用懒加载和keep-alive：

<router-view v-slot="{ Component }">
  <keep-alive>
    <component :is="Component" />
  </keep-alive>
</router-view>