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; /* 可通过按钮切换显示 */
}
}
