vue中如何实现二级菜单导航点击选中事件

发布时间：2022-05-05 18:02:22 作者：iii
来源：亿速云阅读：190

# Vue中如何实现二级菜单导航点击选中事件

## 前言

在Web应用开发中，多级菜单导航是常见的交互组件。本文将详细介绍在Vue.js框架中，如何实现二级菜单导航的点击选中效果，包括状态管理、样式切换和事件处理等核心功能。

---

## 一、基础结构搭建

### 1. 菜单数据结构

首先需要定义合理的菜单数据结构，推荐使用嵌套数组形式：

```javascript
data() {
  return {
    menus: [
      {
        title: '首页',
        path: '/home',
        children: []
      },
      {
        title: '产品中心',
        path: '/products',
        children: [
          { title: '手机', path: '/products/phone' },
          { title: '电脑', path: '/products/pc' }
        ]
      }
    ]
  }
}

2. 模板渲染

使用v-for进行双层循环渲染：

<template>
  <div class="menu-container">
    <div 
      v-for="(item, index) in menus" 
      :key="index"
      class="first-level"
      @click="toggleMenu(index)"
    >
      {{ item.title }}
      <div 
        v-if="item.children && item.children.length"
        class="second-level"
        :class="{ 'show': activeIndex === index }"
      >
        <div 
          v-for="(child, i) in item.children"
          :key="i"
          @click.stop="selectChild(child.path)"
        >
          {{ child.title }}
        </div>
      </div>
    </div>
  </div>
</template>

二、核心功能实现

1. 展开/折叠控制

data() {
  return {
    activeIndex: null
  }
},
methods: {
  toggleMenu(index) {
    this.activeIndex = this.activeIndex === index ? null : index
  }
}

2. 选中状态管理

方案A：使用CSS类名控制

data() {
  return {
    currentPath: ''
  }
},
methods: {
  selectChild(path) {
    this.currentPath = path
    // 实际项目中这里通常需要路由跳转
    // this.$router.push(path)
  }
}

配合CSS：

.second-level div.active {
  color: #409EFF;
  background-color: #ecf5ff;
}

方案B：使用Vuex集中管理状态（适合大型项目）

// store.js
state: {
  activeMenuPath: ''
},
mutations: {
  SET_ACTIVE_MENU(state, path) {
    state.activeMenuPath = path
  }
}

三、进阶优化技巧

1. 路由联动实现

watch: {
  '$route'(to) {
    this.updateActiveMenu(to.path)
  }
},
methods: {
  updateActiveMenu(path) {
    // 遍历菜单树匹配当前路由
    this.menus.forEach((menu, index) => {
      if (menu.path === path) {
        this.activeIndex = index
        this.currentPath = path
        return
      }
      if (menu.children) {
        const child = menu.children.find(c => c.path === path)
        if (child) {
          this.activeIndex = index
          this.currentPath = path
        }
      }
    })
  }
}

2. 持久化选中状态

使用localStorage：

mounted() {
  const savedPath = localStorage.getItem('activeMenuPath')
  if (savedPath) {
    this.currentPath = savedPath
  }
},
methods: {
  selectChild(path) {
    localStorage.setItem('activeMenuPath', path)
    // ...其他逻辑
  }
}

3. 动画效果增强

添加过渡动画：

<transition name="slide">
  <div class="second-level" v-show="activeIndex === index">
    <!-- 内容 -->
  </div>
</transition>

对应CSS：

.slide-enter-active, .slide-leave-active {
  transition: all 0.3s ease;
}
.slide-enter, .slide-leave-to {
  opacity: 0;
  transform: translateY(-10px);
}

四、完整示例代码

<template>
  <div class="menu-wrapper">
    <div 
      v-for="(item, index) in menus"
      :key="'menu-'+index"
      class="first-item"
      :class="{ 'active': isFirstActive(item) }"
    >
      <div @click="handleFirstClick(item, index)">
        {{ item.title }}
        <span v-if="hasChildren(item)">▼</span>
      </div>
      
      <transition name="fade">
        <div 
          v-if="hasChildren(item) && activeFirstIndex === index"
          class="second-wrapper"
        >
          <div
            v-for="(child, i) in item.children"
            :key="'child-'+i"
            class="second-item"
            :class="{ 'active': currentPath === child.path }"
            @click.stop="handleSecondClick(child)"
          >
            {{ child.title }}
          </div>
        </div>
      </transition>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeFirstIndex: null,
      currentPath: ''
    }
  },
  methods: {
    hasChildren(item) {
      return item.children && item.children.length
    },
    isFirstActive(item) {
      if (!this.hasChildren(item)) {
        return this.currentPath === item.path
      }
      return item.children.some(c => c.path === this.currentPath)
    },
    handleFirstClick(item, index) {
      if (this.hasChildren(item)) {
        this.activeFirstIndex = this.activeFirstIndex === index ? null : index
      } else {
        this.currentPath = item.path
        this.$router.push(item.path)
      }
    },
    handleSecondClick(child) {
      this.currentPath = child.path
      this.$router.push(child.path)
    }
  }
}
</script>

结语

通过本文的介绍，我们学习了在Vue中实现二级菜单导航的完整方案。关键点包括： 1. 合理的数据结构设计 2. 使用v-for进行嵌套渲染 3. 通过点击事件管理展开状态 4. 结合路由系统实现联动 5. 添加过渡效果提升用户体验

实际项目中可根据需求进行扩展，如增加权限控制、多级菜单支持等。 “`