nuxtProject/components/header.vue

<template>
  <nav class="client-head">
    <div class="client-container head-layout">
      <div class="head-left">
        <a>
          <i></i>
        </a>
        <el-menu
          :default-active="activeIndex"
          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">
        <i></i><span>4000-522-130</span>
      </div>
    </div>
  </nav>
</template>

<script>
  import mtaLink from '~/components/mtaLink/index';

  let _ = require('lodash');
  export default {
    name:       'mtaHeader',
    components: {
      mtaLink,
    },
    props:      {
      activeNav: { // 默认选中的 路径 与组件中的index相互对应
        type:    String,
        require: true,
        default: '0',
      },
    },
    data() {
      return {
        activeIndex: this.activeNav,
        headerArr:   [
          {
            content: '首页',
            keyPath: '/?userId=1',
          },
          {
            content:  '考试平台',
            keyPath:  '/examsystem',
            children: [],
          },
          {
            content:  '培训平台',
            keyPath:  '/pages/trainsystem',
            children: [],
          },
          {
            content:  '课程开发',
            keyPath:  '/pages/courseDev',
            children: [],
          },
          {
            content:  '新闻资讯',
            keyPath:  '/pages/newsInfor',
            children: [],
          },
          {
            content:  '帮助中心',
            keyPath:  '/pages/helpCenter',
            children: [],
          }, {
            content:  '关于我们',
            keyPath:  '/pages/aboutUs',
            children: [],
          },

        ],
      };
    },
    watch:      {
      // 监听
      '$route.path': {
        handler(newVal, oldVal) {
          this.activeIndexSync();
        },
        immediate: true,
      },
      /*    $route: {
            handler: function(val, oldVal){
              debugger;
              this.activeIndexSync();
            },
            // 深度观察监听
            deep: true
          }*/
    },
    methods:    {

      activeIndexSync() {
        const path = this.$route.path;
        const idx = _.findIndex(this.headerArr, function (o) {
          return o.keyPath === path;
        });
        if (idx > -1) {
          this.activeIndex = this.headerArr[idx].keyPath;
        } else {
          for (const header of this.headerArr) {
            if (header.children) {
              const idx2 = _.findIndex(header.children, function (o) {
                return o.keyPath === path;
              });
              if (idx2 > -1) {
                this.activeIndex = header.keyPath;
                return;
              }
            }
          }
        }
      },
    },
    mounted() {
      console.log('head:', this.$route.query)
    },
  };
</script>