vue分类功能实现

Vue 分类功能实现方法

基于组件化开发

创建可复用的分类组件，通过 props 接收分类数据。组件内部使用 v-for 渲染分类列表，配合 CSS 实现样式布局。

<template>
  <div class="category-list">
    <div 
      v-for="category in categories" 
      :key="category.id"
      @click="selectCategory(category)"
      :class="{ active: selectedCategory === category.id }"
    >
      {{ category.name }}
    </div>
  </div>
</template>

<script>
export default {
  props: {
    categories: Array,
    selectedCategory: Number
  },
  methods: {
    selectCategory(category) {
      this.$emit('category-selected', category)
    }
  }
}
</script>

状态管理

对于复杂应用，使用 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: {
    fetchCategories({ commit }) {
      // API 请求获取分类数据
      api.getCategories().then(response => {
        commit('SET_CATEGORIES', response.data)
      })
    }
  }
}

动态路由

结合 vue-router 实现分类路由，根据分类 ID 显示不同内容。

// router.js
{
  path: '/category/:id',
  name: 'Category',
  component: () => import('./views/Category.vue'),
  props: true
}

分类筛选功能

在商品列表页实现分类筛选功能，使用计算属性根据选中分类过滤数据。

computed: {
  filteredProducts() {
    if (!this.selectedCategory) return this.products
    return this.products.filter(
      product => product.categoryId === this.selectedCategory
    )
  }
}

多级分类实现

对于多级分类结构，使用递归组件渲染树形分类菜单。

<template>
  <ul>
    <li v-for="category in categories" :key="category.id">
      {{ category.name }}
      <category-tree 
        v-if="category.children && category.children.length" 
        :categories="category.children"
      />
    </li>
  </ul>
</template>

<script>
export default {
  name: 'CategoryTree',
  props: {
    categories: Array
  }
}
</script>

性能优化

对于大量分类数据，采用虚拟滚动或分页加载技术优化性能。使用 keep-alive 缓存分类组件状态。

<keep-alive>
  <category-list :categories="categories" />
</keep-alive>