当前位置：首页 > VUE

vue 实现商城分类

2026-03-10 02:12:49VUE

Vue 实现商城分类功能

数据结构设计

商城分类通常采用树形结构，需设计包含 id、name、children 等字段的嵌套数据。例如：

[
  {
    "id": 1,
    "name": "电子产品",
    "children": [
      {
        "id": 101,
        "name": "手机",
        "children": []
      }
    ]
  }
]

组件拆分

分类侧边栏组件：用于展示一级分类，通过点击切换当前分类。
子分类展示组件：根据当前选中的一级分类动态渲染二级或三级分类。
商品列表组件：展示当前分类下的商品数据。

动态渲染分类

使用 v-for 递归渲染嵌套分类结构：

<template>
  <div v-for="category in categories" :key="category.id">
    <div @click="selectCategory(category)">{{ category.name }}</div>
    <div v-if="category.children.length > 0" class="sub-categories">
      <CategoryList :categories="category.children" />
    </div>
  </div>
</template>

状态管理

通过 Vuex 或 Pinia 管理当前选中的分类 ID，实现跨组件状态共享：

// Pinia 示例
export const useCategoryStore = defineStore('category', {
  state: () => ({
    currentCategoryId: null
  }),
  actions: {
    setCurrentCategory(id) {
      this.currentCategoryId = id
    }
  }
})

路由参数绑定

将分类 ID 与路由参数绑定，支持直接访问特定分类页：

const routes = [
  {
    path: '/category/:id',
    component: CategoryPage,
    props: true
  }
]

数据请求优化

使用 computed 缓存分类数据，避免重复请求：

vue 实现商城分类

const categories = computed(() => store.getters.getCategories)

交互增强

添加分类展开/折叠动画
使用 active 类标记当前选中分类
实现面包屑导航显示分类路径

移动端适配

侧边栏改为滑动抽屉式布局
通过手势事件支持左右滑动切换分类
使用 vw/vh 单位确保布局响应式

完整实现需结合具体业务需求调整数据结构和交互细节。

标签: 商城 vue

分享给朋友：

vue实现下载暂停

Vue实现下载暂停功能在Vue中实现下载暂停功能，通常需要结合XMLHttpRequest或Fetch API的AbortController来控制请求中断。以下是具体实现方法：使用XMLHtt…

eventbus vue实现

EventBus 实现原理 EventBus 是一种发布/订阅模式，用于 Vue 组件间的通信。核心是通过一个中央事件总线管理事件监听和触发。创建 EventBus 在 Vue 项目中创建一个独立…

vue实现iframe

Vue 中实现 iframe 的方法在 Vue 项目中，可以通过多种方式实现 iframe 的嵌入。以下是几种常见的方法：使用原生 HTML iframe 标签直接在 Vue 组件的模板中使用…

vue 实现过滤

Vue 实现过滤的方法在 Vue 中实现过滤功能可以通过多种方式完成，包括使用计算属性、自定义过滤器、第三方库等。以下是几种常见的实现方法：使用计算属性进行过滤计算属性是 Vue 中最常用的过…

vue实现路由

Vue 路由的实现方法 Vue 路由可以通过 Vue Router 库来实现，Vue Router 是 Vue.js 官方的路由管理器，用于构建单页面应用（SPA）。安装 Vue Router 通…

vue实现ajax

Vue 中实现 AJAX 的几种方法在 Vue 中实现 AJAX 请求可以通过原生 JavaScript 的 XMLHttpRequest、第三方库如 axios 或 fetch API 来完成。以…

vue 实现商城分类