nuxtProject/components/header.vue

<template>
  <nav class="client-head">
    <div class="client-container head-layout">
      <div class="head-left mta-hidden-sm">
        <a :href="`${baseUrl}`" class="client-head-img"></a>
        <div  @click="navChange">
          <el-menu
            :default-active="activeNav"
            :class="navClass"
            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>
        <a class="phone-tel-box mta-hidden-sm" href="tel:400-052-2130">咨询电话：400-052-2130</a>
        <!-- 手机按钮 -->
        <div class="phone-nav-btn mta-hidden-sm" @click="changeHeadNav"></div>
      </div>
      <div class="head-left mta-hidden-xs">
        <a :href="`${baseUrl}`" class="client-head-img"></a>
        <div>
          <div class="header-left-container">
            <a class="phone-tel-box" href="tel:400-052-2130"> <i class="phone-tel-box-icon"></i> <span>咨询电话：400-052-2130</span></a>
            <div class="head-right mta-hidden-xs">
              <a class="right-tel-btn">免费注册</a>
              <div class="system-box">
                <div>
                  <a  rel="nofollow" href="https://cdnks.mtavip.com/a/register?flug=1" target="_blank"><i></i><p>考试系统</p></a>
                  <span></span>
                  <a   rel="nofollow" href="https://cdnks.mtavip.com/a/register?flug=2" target="_blank"><i></i><p>培训系统</p></a>
                </div>
              </div>
              <a rel="nofollow" href="https://cdnks.mtavip.com/a/registerLogin" target="_blank">登录</a>
            </div></div>
          <div>
            <div @click="navChange">
              <el-menu
                :default-active="activeNav"
                :class="navClass"
                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>
        </div>
      </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 {
        navClass:'head-nav-up',
        headerArr:   [
          {
            content: '首页',
            keyPath: '/',
          },
          {
            content:  '考试系统',
            keyPath:  '/examsystem',
            children: [],
          },
          {
            content:  '培训系统',
            keyPath:  '/trainsystem',
            children: [],
          },
       /*   {
            content:  '课程资源',
            keyPath:  '/resources',
            children: [],
          },*/
          {
            content:  '体验中心',
            keyPath:  '/tiyanCenter',
            children: [],
          },
          {
            content:  '课程开发',
            keyPath:  '/courseware',
            children: [],
          },
          {
            content:  '客户案例',
            keyPath:  '/news',
            children: [],
          },
          /*      {
                  content:  '帮助中心',
                  keyPath:  '/helpCenter',
                  children: [],
                },*/
          {
            content:  '关于我们',
            keyPath:  '/introduction',
            children: [],
          },

        ],
      };
    },
    methods:{
      // 点击按钮菜单变化
      changeHeadNav(){
          if(this.navClass ==='head-nav-up' ){
              this.navClass = 'head-nav-down'
          }else{
            this.navClass = 'head-nav-up'
        }
      },
      navChange(){
        this.navClass = 'head-nav-up'
      },
    },
  };
</script>