Vue实战篇十六：导航菜单

系列文章目录

Vue基础篇一：编写第一个Vue程序
Vue基础篇二：Vue组件的核心概念
Vue基础篇三：Vue的计算属性与侦听器
Vue基础篇四：Vue的生命周期（秒杀案例实战）
Vue基础篇五：Vue的指令
Vue基础篇六：Vue使用JSX进行动态渲染
Vue提高篇一：使用Vuex进行状态管理
Vue提高篇二：使用vue-router实现静态路由
Vue提高篇三：使用vue-router实现动态路由
Vue提高篇四：使用Element UI组件库
Vue提高篇五：使用Jest进行单元测试
Vue提高篇六： 使用Vetur+ESLint+Prettier插件提升开发效率
Vue实战篇一： 使用Vue搭建注册登录界面
Vue实战篇二： 实现邮件验证码发送
Vue实战篇三：实现用户注册
Vue实战篇四：创建多步骤表单
Vue实战篇五：实现文件上传
Vue实战篇六：表格渲染动态数据
Vue实战篇七：表单校验
Vue实战篇八：实现弹出对话框进行交互
Vue实战篇九：使用省市区级联选择插件
Vue实战篇十：响应式布局
Vue实战篇十一：父组件获取子组件数据的常规方法
Vue实战篇十二：多项选择器的实际运用
Vue实战篇十三：实战分页组件
Vue实战篇十四：前端excel组件实现数据导入
Vue实战篇十五：表格数据多选在实际项目中的技巧
Vue实战篇十六：导航菜单

---

一、背景

• 导航菜单顾名思义即是为网站提供导航功能的组件：

1. 在中后台管理系统中，我们一般会应用导航菜单、路由及后台权限，形成用户菜单栏。
2. 同时，导航菜单也可以为网站建立导航栏，引导网站访问进行相应的网页浏览， 本文将通过Element Navbbar组件进行实战演示。

二、Element Navbar

2.1 顶栏模式

• 导航菜单默认为垂直模式，通过mode属性可以使导航菜单变更为水平模式。
  

<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
  <el-menu-item index="1">处理中心</el-menu-item>
  <el-submenu index="2">
    <template slot="title">我的工作台</template>
    <el-menu-item index="2-1">选项1</el-menu-item>
    <el-menu-item index="2-2">选项2</el-menu-item>
    <el-menu-item index="2-3">选项3</el-menu-item>
    <el-submenu index="2-4">
      <template slot="title">选项4</template>
      <el-menu-item index="2-4-1">选项1</el-menu-item>
      <el-menu-item index="2-4-2">选项2</el-menu-item>
      <el-menu-item index="2-4-3">选项3</el-menu-item>
    </el-submenu>
  </el-submenu>
  <el-menu-item index="3" disabled>消息中心</el-menu-item>
  <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
</el-menu>
<div class="line"></div>
<el-menu
  :default-active="activeIndex2"
  class="el-menu-demo"
  mode="horizontal"
  @select="handleSelect"
  background-color="#545c64"
  text-color="#fff"
  active-text-color="#ffd04b">
  <el-menu-item index="1">处理中心</el-menu-item>
  <el-submenu index="2">
    <template slot="title">我的工作台</template>
    <el-menu-item index="2-1">选项1</el-menu-item>
    <el-menu-item index="2-2">选项2</el-menu-item>
    <el-menu-item index="2-3">选项3</el-menu-item>
    <el-submenu index="2-4">
      <template slot="title">选项4</template>
      <el-menu-item index="2-4-1">选项1</el-menu-item>
      <el-menu-item index="2-4-2">选项2</el-menu-item>
      <el-menu-item index="2-4-3">选项3</el-menu-item>
    </el-submenu>
  </el-submenu>
  <el-menu-item index="3" disabled>消息中心</el-menu-item>
  <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
</el-menu>

三、实战演示

• 创建网站的顶栏导航条：

1. 最左边为网站logo
2. 从logo从左往右为各个导航功能
3. 搜索栏
4. 最右边为消息中心及个人中心图标。

<template>
  <div>
    <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
      @select="handleSelect"
    >
      <!-- 自定义logo组件 -->
      <el-menu-item index="0"> <Logo :collapse="false" /></el-menu-item>

      <el-menu-item index="1">产品开发</el-menu-item>
      <el-menu-item index="2">材料开发</el-menu-item>
      <el-menu-item index="3">平台开发</el-menu-item>
      <el-menu-item index="4">知识沉淀</el-menu-item>
      <el-menu-item index="5">知识地图</el-menu-item>

      <el-menu-item index="50">
        <i class="el-icon-search" />
        <el-input v-model="keyWord" size="mini" placeholder="搜索" />
      </el-menu-item>
      <el-menu-item index="60" style="float:right;">
        <div>
          <el-tooltip content="消息中心" effect="dark" placement="bottom">
            <img :src="Message" class="user-avatar" />
          </el-tooltip>
          <el-tooltip content="个人中心" effect="dark" placement="bottom">
            <img :src="Avatar" class="user-avatar" />
          </el-tooltip>
        </div>
      </el-menu-item>
    </el-menu>
  </div>
</template>
<script>
import Logo from './Logo'
import Avatar from '@/assets/images/avatar.png'
import Message from '@/assets/images/message.png'
export default {
  components: { Logo },
  data() {
    return {
      Avatar: Avatar,
      Message: Message,
      activeIndex: '1',
      keyWord: ''
    }
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath)
    }
  }
}
</script>
<style lang="scss" scoped>
  .user-avatar {
          margin-left: 5px;
          cursor: pointer;
          width: 40px;
          height: 40px;
          border-radius: 10px;
        }
</style>