nuxtProject/components/header.vue

<template>
  <nav class="client-head">
    <div class="client-container head-layout">
      <div class="head-left">
        <a :href="`${baseUrl}`"></a>
        <el-menu
          :default-active="activeNav"
          class="el-menu-demo"
          mode="horizontal"
          :router="false"
        >
          <template v-for="(item,index) in headerArr">
            <el-submenu :index="`${item.keyPath}`" v-if="item.children && item.children.length > 0"
                        popper-class="mta-menu-two">
              <template slot="title">{{item.content}}</template>
              <el-menu-item :index="`${child.keyPath}`" v-for="child of item.children"
                            :key="child.keyPath">
                <mtaLink :path="child.keyPath" :instation="true" :content="child.content"></mtaLink>
              </el-menu-item>
            </el-submenu>

            <el-menu-item :index="`${item.keyPath}`" v-else>
              <mtaLink :path="item.keyPath" :instation="true" :content="item.content"></mtaLink>
            </el-menu-item>
          </template>
        </el-menu>

      </div>
      <div class="head-right">
        <a rel="nofollow" href="https://cdnks.mtavip.com/a/register?flug=1" target="_blank">免费试用</a>
        <a class="right-tel-btn" href="http://p.qiao.baidu.com/cps/chat?siteId=11735491&amp;userId=10530011" target="_blank"><i></i>4000-522-130</a>
      </div>
    </div>
  </nav>
</template>

<script>
  import mtaLink        from '~/components/mtaLink/index';
  import { mapGetters } from 'vuex';

  let _ = require('lodash');
  export default {
    name:       'mtaHeader',
    components: {
      mtaLink,
    },
    computed: {
      activeNav() {
        return this.getActiveNav;
      },
      baseUrl() {
        return this.getBaseUrl;
      },
      ...mapGetters(['getActiveNav','getBaseUrl'])
    },
    data() {
      return {
        headerArr:   [
          {
            content: '首页',
            keyPath: '/',
          },
          {
            content:  '考试系统',
            keyPath:  '/examsystem',
            children: [],
          },
          {
            content:  '培训系统',
            keyPath:  '/trainsystem',
            children: [],
          },
          {
            content:  '课程开发',
            keyPath:  '/courseware',
            children: [],
          },
          {
            content:  '新闻资讯',
            keyPath:  '/news',
            children: [],
          },
          /*      {
                  content:  '帮助中心',
                  keyPath:  '/helpCenter',
                  children: [],
                },*/
          {
            content:  '关于我们',
            keyPath:  '/introduction',
            children: [],
          },

        ],
      };
    },
  };
</script>