vue实现网站侧边栏

实现侧边栏的基本结构

使用Vue的组件化思想，将侧边栏拆分为独立组件。在components目录下创建Sidebar.vue文件，基础模板结构如下：

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

定义侧边栏数据

在Vue组件的data或setup中定义菜单项数据，支持动态渲染：

<script>
export default {
  data() {
    return {
      menuItems: [
        { id: 1, title: 'Dashboard', path: '/dashboard' },
        { id: 2, title: 'Profile', path: '/profile' },
        { id: 3, title: 'Settings', path: '/settings' }
      ]
    }
  }
}
</script>

添加样式美化

通过CSS为侧边栏添加基础样式，建议使用CSS变量便于主题切换：

<style scoped>
.sidebar {
  width: 250px;
  height: 100vh;
  background: #2c3e50;
  color: white;
  position: fixed;
  left: 0;
  top: 0;
}

.logo {
  padding: 20px;
  font-size: 1.5rem;
  text-align: center;
}

.menu li {
  padding: 15px 20px;
  border-bottom: 1px solid #34495e;
}

.menu li a {
  color: white;
  text-decoration: none;
}
</style>

实现折叠功能

添加折叠状态控制，通过Vue的响应式特性实现交互：

<template>
  <div class="sidebar" :class="{ 'collapsed': isCollapsed }">
    <button @click="toggleCollapse">☰</button>
    <!-- 其他内容 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      isCollapsed: false
    }
  },
  methods: {
    toggleCollapse() {
      this.isCollapsed = !this.isCollapsed
    }
  }
}
</script>

<style>
.sidebar.collapsed {
  width: 60px;
}
</style>

嵌套路由集成

与Vue Router深度集成，实现路由高亮显示：

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

.active {
  background-color: #34495e;
}
.exact-active {
  font-weight: bold;
}

响应式适配

通过媒体查询实现移动端适配：

@media (max-width: 768px) {
  .sidebar {
    width: 100%;
    height: auto;
    position: relative;
  }
  .menu {
    display: flex;
    flex-wrap: wrap;
  }
  .menu li {
    flex: 1 0 auto;
  }
}

状态管理集成

对于复杂应用，建议使用Pinia/Vuex管理侧边栏状态：

// store/sidebar.js
import { defineStore } from 'pinia'

export const useSidebarStore = defineStore('sidebar', {
  state: () => ({
    isCollapsed: false,
    menuItems: [...]
  }),
  actions: {
    toggleCollapse() {
      this.isCollapsed = !this.isCollapsed
    }
  }
})

组件中调用：

import { useSidebarStore } from '@/store/sidebar'

export default {
  setup() {
    const sidebar = useSidebarStore()
    return { sidebar }
  }
}