vue实现商城左侧导航

实现思路

使用Vue实现商城左侧导航通常涉及以下核心功能：分类数据渲染、动态高亮选中项、二级菜单展开/折叠、路由跳转或状态管理。以下是具体实现方法。

基础结构搭建

在Vue组件中，使用<ul>和<li>构建导航层级，通过v-for循环渲染分类数据。数据建议存储在组件的data或通过Vuex/Pinia管理。

<template>
  <div class="left-nav">
    <ul>
      <li 
        v-for="item in navList" 
        :key="item.id"
        :class="{ active: activeId === item.id }"
        @click="handleClick(item)"
      >
        {{ item.name }}
        <!-- 二级菜单 -->
        <ul v-if="item.children && item.showChildren">
          <li v-for="child in item.children" :key="child.id">
            {{ child.name }}
          </li>
        </ul>
      </li>
    </ul>
  </div>
</template>

数据与交互逻辑

数据示例包含一级分类和嵌套的二级分类，通过activeId控制高亮，showChildren控制二级菜单显隐。

<script>
export default {
  data() {
    return {
      activeId: null,
      navList: [
        {
          id: 1,
          name: "家用电器",
          showChildren: false,
          children: [
            { id: 101, name: "空调" },
            { id: 102, name: "洗衣机" }
          ]
        },
        {
          id: 2,
          name: "数码产品",
          showChildren: false,
          children: [
            { id: 201, name: "手机" },
            { id: 202, name: "相机" }
          ]
        }
      ]
    };
  },
  methods: {
    handleClick(item) {
      this.activeId = item.id;
      item.showChildren = !item.showChildren;
      // 实际项目中可能触发路由跳转或过滤商品列表
    }
  }
};
</script>

样式设计

使用CSS实现悬浮效果、高亮状态和动画过渡。建议使用Scoped CSS避免样式污染。

<style scoped>
.left-nav {
  width: 200px;
  background: #f5f5f5;
}
.left-nav ul {
  list-style: none;
  padding: 0;
}
.left-nav > ul > li {
  padding: 10px;
  cursor: pointer;
  border-left: 3px solid transparent;
}
.left-nav > ul > li:hover {
  background: #e0e0e0;
}
.left-nav > ul > li.active {
  border-left-color: #ff6700;
  background: #e0e0e0;
}
.left-nav ul ul {
  padding-left: 15px;
}
.left-nav ul ul li {
  padding: 8px 0;
}
</style>

动态数据加载

实际项目中，分类数据通常通过API异步获取。使用axios或fetch从后端接口加载数据。

created() {
  fetch('/api/categories')
    .then(res => res.json())
    .then(data => {
      this.navList = data.map(item => ({
        ...item,
        showChildren: false
      }));
    });
}

性能优化

对于大型分类树，可采用以下优化方案：

• 懒加载二级菜单：首次点击时才加载子分类数据
• 虚拟滚动：超长列表时只渲染可视区域内的DOM
• 使用<keep-alive>缓存组件状态

与路由集成

若需通过导航切换页面，可将点击事件关联到Vue Router：

methods: {
  handleClick(item) {
    this.$router.push(`/category/${item.id}`);
  }
}

响应式适配

通过媒体查询实现移动端折叠效果：

@media (max-width: 768px) {
  .left-nav {
    width: 100%;
    display: none; /* 可通过按钮切换显示 */
  }
}