当前位置：首页 > VUE

vue实现多级导航目录

2026-01-21 01:24:18VUE

Vue 实现多级导航目录

数据结构设计

使用嵌套的树形结构存储导航数据，例如：

const menuData = [
  {
    title: '一级菜单1',
    children: [
      { title: '二级菜单1-1', path: '/path1' },
      { title: '二级菜单1-2', path: '/path2' }
    ]
  },
  {
    title: '一级菜单2',
    children: [
      { 
        title: '二级菜单2-1',
        children: [
          { title: '三级菜单2-1-1', path: '/path3' }
        ]
      }
    ]
  }
]

递归组件实现

创建可递归调用的菜单组件：

<template>
  <ul class="menu">
    <li v-for="item in data" :key="item.title">
      <div @click="toggle(item)">
        {{ item.title }}
        <span v-if="item.children">{{ isOpen(item) ? '-' : '+' }}</span>
      </div>
      <menu-item 
        v-if="item.children && isOpen(item)" 
        :data="item.children"
      />
    </li>
  </ul>
</template>

<script>
export default {
  name: 'MenuItem',
  props: ['data'],
  data() {
    return { openedItems: [] }
  },
  methods: {
    toggle(item) {
      const index = this.openedItems.indexOf(item)
      index === -1 
        ? this.openedItems.push(item) 
        : this.openedItems.splice(index, 1)
    },
    isOpen(item) {
      return this.openedItems.includes(item)
    }
  }
}
</script>

样式优化

添加基础交互样式：

.menu {
  list-style: none;
  padding-left: 20px;
}
.menu li {
  cursor: pointer;
  margin: 5px 0;
}
.menu li div {
  padding: 5px 10px;
  background: #f5f5f5;
  border-radius: 4px;
}
.menu li div:hover {
  background: #e0e0e0;
}

路由集成

与vue-router结合使用：

// 在导航数据中添加路由配置
{
  title: '用户管理',
  path: '/user',
  children: [
    { title: '用户列表', path: '/user/list' }
  ]
}

// 修改组件点击处理
methods: {
  navigate(item) {
    if (item.path) {
      this.$router.push(item.path)
    }
  }
}

状态管理方案

对于大型应用可考虑Vuex：

// store.js
export default new Vuex.Store({
  state: {
    menus: menuData,
    activeMenu: null
  },
  mutations: {
    setActiveMenu(state, menu) {
      state.activeMenu = menu
    }
  }
})

性能优化

对大型菜单数据使用虚拟滚动：

<template>
  <RecycleScroller 
    :items="flattenedMenu"
    :item-size="50"
    key-field="id"
  >
    <template v-slot="{ item }">
      <div :style="{ paddingLeft: item.level * 20 + 'px' }">
        {{ item.title }}
      </div>
    </template>
  </RecycleScroller>
</template>

vue实现多级导航目录