Vue实现导航栏菜单

我会为您详细讲解如何使用Vue实现导航栏菜单。

1. 确定导航栏菜单数据格式

首先我们需要确定导航栏菜单的数据格式，一般而言可以使用以下格式：

menuList: [
  {
    name: 'Home',
    path: '/',
    icon: 'el-icon-menu'
  },
  {
    name: 'Service',
    path: '/service',
    icon: 'el-icon-star-off'
  },
  {
    name: 'About',
    path: '/about',
    icon: 'el-icon-info'
  }
]

其中，name 代表菜单名称，path 代表菜单链接，icon 代表菜单图标。

2. 创建菜单组件

接下来，我们可以创建一个菜单组件，用于展示导航栏菜单：

<template>
  <el-menu mode="horizontal" :default-active="active" class="app-menu">
    <el-menu-item v-for="item in menuList" :key="item.name" :index="item.path">
      <i :class="item.icon"></i>
      <span slot="title">{{ item.name }}</span>
    </el-menu-item>
  </el-menu>
</template>

<script>
export default {
  name: 'AppMenu',
  props: {
    menuList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      active: '/'
    }
  },
  methods: {
    handleSelect(key, keyPath) {
      this.active = key;
      this.$router.push(key);
    }
  }
}
</script>

<style scoped>
.app-menu {
  background-color: #fff;
  border-bottom: 1px solid #ebebeb;
}
</style>

其中，我们使用了 Element UI 组件库中的 Menu 组件，通过 props 接收菜单数据，展示菜单列表，并在菜单项选中时切换路由。

3. 在路由中引用菜单组件

最后，在路由配置中引用菜单组件，并传入菜单数据：

import Vue from 'vue';
import VueRouter from 'vue-router';
import AppMenu from './components/AppMenu.vue';
import Home from './views/Home.vue';

Vue.use(VueRouter);

const routes = [
  {
    path: '/',
    component: Home
  },
  {
    path: '/service',
    component: () => import('./views/Service.vue')
  },
  {
    path: '/about',
    component: () => import('./views/About.vue')
  }
];

const router = new VueRouter({
  routes
});

new Vue({
  router,
  render: h => h(App, [
    h(AppMenu, {
      props: {
        menuList: [
          {
            name: 'Home',
            path: '/',
            icon: 'el-icon-menu'
          },
          {
            name: 'Service',
            path: '/service',
            icon: 'el-icon-star-off'
          },
          {
            name: 'About',
            path: '/about',
            icon: 'el-icon-info'
          }
        ]
      }
    }),
    h(App)
  ])
}).$mount('#app');

这样，在页面中就可以看到带有基本样式的导航栏菜单。

示例1

以下是一个示例，在菜单项上添加二级菜单：

menuList: [
  {
    name: 'Home',
    path: '/',
    icon: 'el-icon-menu'
  },
  {
    name: 'Service',
    path: '/service',
    icon: 'el-icon-star-off',
    children: [
      {
        name: 'SubService1',
        path: '/service/sub1'
      },
      {
        name: 'SubService2',
        path: '/service/sub2'
      }
    ]
  },
  {
    name: 'About',
    path: '/about',
    icon: 'el-icon-info'
  }
]

我们可以在菜单组件中添加以下代码实现二级菜单：

<el-submenu v-if="item.children" :index="item.path">
  <template slot="title">
    <i :class="item.icon"></i>
    <span>{{ item.name }}</span>
  </template>
  <el-menu-item v-for="subItem in item.children" :key="subItem.name" :index="subItem.path">
    <span>{{ subItem.name }}</span>
  </el-menu-item>
</el-submenu>

这样，在 Service 菜单项上就有了 SubService1 和 SubService2 两个子菜单。

示例2

以下是另一个示例，在菜单项上添加角标：

menuList: [
  {
    name: 'Home',
    path: '/',
    icon: 'el-icon-menu'
  },
  {
    name: 'Service',
    path: '/service',
    icon: 'el-icon-star-off',
    badge: 4
  },
  {
    name: 'About',
    path: '/about',
    icon: 'el-icon-info'
  }
]

我们可以在菜单组件中添加以下代码实现角标：

<el-badge v-if="item.badge" :value="item.badge">
  <i :class="item.icon"></i>
  <span slot="badge">{{ item.badge }}</span>
  <span slot="title">{{ item.name }}</span>
</el-badge>
<el-menu-item v-else :index="item.path">
  <i :class="item.icon"></i>
  <span slot="title">{{ item.name }}</span>
</el-menu-item>

这样，在 Service 菜单项上就有了一个带有数字角标的图标。