vue实现商城左侧导航

实现商城左侧导航的步骤

使用Vue实现商城左侧导航需要结合组件化开发、状态管理和样式设计。以下是具体实现方法：

数据结构设计

左侧导航通常需要分类数据，建议使用嵌套数组结构：

data() {
  return {
    categories: [
      {
        id: 1,
        name: '电子产品',
        children: [
          { id: 11, name: '手机' },
          { id: 12, name: '电脑' }
        ]
      },
      {
        id: 2,
        name: '家居用品',
        children: [
          { id: 21, name: '家具' },
          { id: 22, name: '厨具' }
        ]
      }
    ],
    activeCategory: null
  }
}

模板结构

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

<template>
  <div class="sidebar">
    <ul class="category-list">
      <li 
        v-for="category in categories" 
        :key="category.id"
        @mouseenter="activeCategory = category.id"
        :class="{ active: activeCategory === category.id }"
      >
        <span>{{ category.name }}</span>
        <ul 
          v-if="category.children && activeCategory === category.id" 
          class="submenu"
        >
          <li 
            v-for="sub in category.children" 
            :key="sub.id"
            @click="selectSubCategory(sub)"
          >
            {{ sub.name }}
          </li>
        </ul>
      </li>
    </ul>
  </div>
</template>

交互逻辑

添加方法处理分类选择：

methods: {
  selectSubCategory(subCategory) {
    this.$emit('category-selected', subCategory)
    // 可以在这里添加路由跳转或状态更新
  }
}

样式设计

使用CSS实现导航样式和动画效果：

.sidebar {
  width: 200px;
  background-color: #f5f5f5;
  height: 100%;
}

.category-list {
  list-style: none;
  padding: 0;
}

.category-list > li {
  padding: 12px 15px;
  cursor: pointer;
  position: relative;
}

.category-list > li:hover {
  background-color: #e8e8e8;
}

.category-list > li.active {
  background-color: #e0e0e0;
}

.submenu {
  position: absolute;
  left: 100%;
  top: 0;
  width: 200px;
  background: white;
  box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
  list-style: none;
  padding: 0;
  z-index: 100;
}

.submenu li {
  padding: 10px 15px;
}

.submenu li:hover {
  background-color: #f0f0f0;
}

响应式处理

添加媒体查询适应移动端：

@media (max-width: 768px) {
  .sidebar {
    width: 100%;
    height: auto;
  }

  .submenu {
    position: static;
    width: 100%;
    box-shadow: none;
  }
}

性能优化

对于大型分类结构，可以使用虚拟滚动：

import { RecycleScroller } from 'vue-virtual-scroller'

// 在模板中替换v-for部分
<RecycleScroller
  :items="categories"
  :item-size="50"
  key-field="id"
  v-slot="{ item }"
>
  <!-- 渲染每个分类项 -->
</RecycleScroller>

状态管理

对于复杂应用，建议使用Vuex管理导航状态：

// store/modules/categories.js
export default {
  state: {
    categories: [],
    currentCategory: null
  },
  mutations: {
    SET_CATEGORIES(state, categories) {
      state.categories = categories
    },
    SET_CURRENT_CATEGORY(state, category) {
      state.currentCategory = category
    }
  },
  actions: {
    async fetchCategories({ commit }) {
      const res = await api.getCategories()
      commit('SET_CATEGORIES', res.data)
    }
  }
}

路由集成

与vue-router集成实现导航跳转：

// 在方法中
selectSubCategory(subCategory) {
  this.$router.push({
    name: 'products',
    query: { category: subCategory.id }
  })
}

实现时可根据实际需求调整数据结构、样式和交互细节。对于更复杂的商城系统，可以考虑使用现成的UI组件库如Element UI或Ant Design Vue中的菜单组件。