Vue.js结合Element-UI实现导航菜单组件复用

定义顶部导航菜单

CloudTabHead.vue

注意，这里不要用<el-header>或者<el-container>之类的标签去包装，不然你在用的时候会出现错乱，还有可能导致

Component template should contain exactly one root element的错误（这是因为一个template模板只能有一个根<div>，可以认为也不能出现两个根<el-container>。

<template>
  <el-menu class="el-menu-header" mode="horizontal" @select="handleSelect">
    <el-menu-item index="1"><router-link :to="{ path: '/cloud/index' }">首页</router-link></el-menu-item>
    <el-menu-item index="2"><router-link :to="{ path: '/cloud/list' }">服务器列表</router-link></el-menu-item>
    <el-menu-item index="3">控制台</el-menu-item>
    <el-menu-item index="4">消息中心</el-menu-item>
    <el-menu-item index="5"><router-link :to="{ path: '/cloud/about' }">关于我们</router-link></el-menu-item>
    <el-menu-item>
      <el-dropdown>
          <span class="el-dropdown-link">
            {{ username }}<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item @click.native="toLogout">退出</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </el-menu-item>
  </el-menu>
</template>

<script>
import { mapMutations } from 'vuex';
import store from '../store'

export default {
  name: "CloudTabHead",
  data() {
    return {
      username: store.getters.userName,
    }
  },
  methods: {
    ...mapMutations(['changeLogin']),
    toLogout() {
      localStorage.removeItem('Authorization');
      localStorage.removeItem('Username');
      this.$router.push(
        {
          path: "/cloud/login",
        }
      )
    },
  }
}
</script>

<style scoped>
.el-menu-header {
  float: right;
  /*margin-right: 200px;*/
  /*width: 100%;*/
  /*text-align: right;*/
}
a {
  text-decoration: none;
}

.router-link-active {
  text-decoration: none;
}
</style>

在其他组件中使用

CloudTest.vue

<el-container  style="height: 620px; border: 1px solid #eee">
    <el-header>
        <CloudTabHead></CloudTabHead>
    </el-header>
</el-container>

引入组件 

<script>
import CloudTabHead from "./CloudTabHead";
var _this = {};
import store from '../store'
import {formatDate} from '../utils/formatDate.js'
import HighCharts from 'highcharts'
import CloudTabHead from "./CloudTabHead";
export default {
  name: "CloudTest",
  components: { CloudTabHead },
  data() {
      return {

    }
  }
}
</script>