vue实现侧边导航

Vue 实现侧边导航

在 Vue 中实现侧边导航可以通过多种方式完成，以下是一个常见的实现方法，结合 Vue Router 和动态菜单组件。

创建侧边导航组件

新建一个 Sidebar.vue 组件，用于渲染导航菜单：

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

<script>
export default {
  data() {
    return {
      menuItems: [
        { path: '/home', name: '首页' },
        { path: '/about', name: '关于' },
        { path: '/contact', name: '联系我们' }
      ]
    }
  }
}
</script>

<style scoped>
.sidebar {
  width: 200px;
  background-color: #f4f4f4;
  padding: 20px;
}
.sidebar ul {
  list-style: none;
  padding: 0;
}
.sidebar li {
  margin-bottom: 10px;
}
.sidebar a {
  text-decoration: none;
  color: #333;
}
.sidebar a:hover {
  color: #42b983;
}
</style>

在布局中使用侧边导航

在主布局文件（如 App.vue 或 Layout.vue）中引入侧边导航组件：

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

<script>
import Sidebar from './components/Sidebar.vue'

export default {
  components: {
    Sidebar
  }
}
</script>

<style>
.app-container {
  display: flex;
}
.main-content {
  flex: 1;
  padding: 20px;
}
</style>

动态生成导航菜单

如果需要从后端获取菜单数据，可以使用异步方法：

<script>
export default {
  data() {
    return {
      menuItems: []
    }
  },
  async created() {
    try {
      const response = await fetch('/api/menu')
      this.menuItems = await response.json()
    } catch (error) {
      console.error('获取菜单失败:', error)
    }
  }
}
</script>

嵌套路由支持

对于多级菜单，可以修改数据结构并添加递归组件：

<template>
  <div class="sidebar">
    <ul>
      <li v-for="item in menuItems" :key="item.path">
        <router-link v-if="!item.children" :to="item.path">{{ item.name }}</router-link>
        <template v-else>
          <div @click="toggleSubmenu(item)">
            {{ item.name }}
          </div>
          <ul v-show="item.expanded">
            <li v-for="child in item.children" :key="child.path">
              <router-link :to="child.path">{{ child.name }}</router-link>
            </li>
          </ul>
        </template>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      menuItems: [
        {
          path: '/dashboard',
          name: '仪表盘',
          expanded: false
        },
        {
          name: '产品',
          expanded: false,
          children: [
            { path: '/products/list', name: '产品列表' },
            { path: '/products/add', name: '添加产品' }
          ]
        }
      ]
    }
  },
  methods: {
    toggleSubmenu(item) {
      item.expanded = !item.expanded
    }
  }
}
</script>

响应式侧边栏

添加响应式功能，在小屏幕设备上可以折叠侧边栏：

<template>
  <div class="sidebar" :class="{ 'collapsed': isCollapsed }">
    <button @click="toggleSidebar">☰</button>
    <ul v-show="!isCollapsed">
      <!-- 菜单项 -->
    </ul>
  </div>
</template>

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

<style>
.sidebar {
  transition: width 0.3s;
}
.sidebar.collapsed {
  width: 50px;
}
</style>

这些方法提供了实现侧边导航的基本框架，可以根据具体需求进行调整和扩展。