ElementUI NavMenu

简述解决方案

ElementUI 的 NavMenu（导航菜单）组件为开发者提供了一个简单而强大的工具，用于创建侧边栏、顶部导航等常见页面布局。通过使用 NavMenu 组件，我们可以轻松实现多级菜单的折叠与展开、路由跳转等功能。

如何使用 NavMenu 组件来构建一个功能完善的导航菜单，并提供多种实现思路以满足不同场景下的需求。

基础用法

我们来看最简单的用法：

vue

  
    首页
    产品
    关于我们
  
</p>


export default {
  data() {
    return {
      activeIndex: '1'
    }
  }
}


<p>

这段代码展示了如何创建一个基本的水平导航菜单。mode="horizontal" 表示这是一个横向布局的菜单，而 default-active 属性则设置了默认选中的菜单项。

添加路由支持

为了使菜单项能够进行页面跳转，我们可以结合 Vue Router 来使用：

vue

  
    首页
    产品
    关于我们
  
</p>


export default {
  // 注意这里不需要再手动处理路由跳转逻辑
}


<p>

这里我们给 <el-menu> 添加了 router 属性，这样当点击菜单项时就会自动触发对应的路由跳转。

实现多级菜单

如果需要更复杂的菜单结构，可以使用子菜单组件：

vue
<template>
<el-menu :default-active="activeIndex" router>
<el-submenu index="1">
<template #title>产品中心</template>
<el-menu-item index="/product/phone">手机</el-menu-item>
<el-menu-item index="/product/computer">电脑</el-menu-item>
</el-submenu>
<el-menu-item index="/about">关于我们</el-menu-item>
</el-menu>
</template>


这段代码展示了如何创建一个包含子菜单的导航菜单。<el-submenu> 组件允许我们创建多级菜单结构。

动态加载菜单数据

在实际项目中，菜单数据往往是从后台获取的。我们可以使用 axios 或其他 HTTP 库来获取菜单配置：

vue

  
    
      
        {{ item.title }}
        {{ subItem.title }}
      
      {{ item.title }}
    
  
</p>


import { ref, onMounted } from 'vue'

export default {
  setup() {
    const menuData = ref([])

    onMounted(() => {
      // 模拟从后端获取菜单数据
      menuData.value = [
        {
          title: '产品中心',
          index: '1',
          children: [
            { title: '手机', index: '/product/phone' },
            { title: '电脑', index: '/product/computer' }
          ]
        },
        { title: '关于我们', index: '/about' }
      ]
    })

    return {
      menuData
    }
  }
}


<p>

以上就是关于 ElementUI NavMenu 组件的几种常用实现方式。根据具体需求，您可以选择合适的方案来实现自己的导航菜单。希望这些示例能帮助您更好地理解和使用这个强大而灵活的组件。