nuxtProject/components/header.vue

<template>
  <nav class="client-head">
    <div class="client-container head-layout">
      <div class="head-left">
        <a></a>
        <el-menu
          :default-active="activeIndex"
          class="el-menu-demo"
          mode="horizontal"
          :router="true"
        >
          <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">{{child.content}}
              </el-menu-item>
            </el-submenu>


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

      </div>
      <div class="head-right">
        <i></i><span>4000-522-130</span>
      </div>
    </div>
  </nav>
</template>

<script>
  export default {
    name:       'mtaHeader',
    props:      {
      activeNav: { // 默认选中的 路径 与组件中的index相互对应
        type:    String,
        require: true,
        default: '0',
      },
    },
    components: {},
    data() {
      return {
        activeIndex: this.activeNav,
        headerArr:            [
          {
            content: '首页',
            keyPath: '/pages/index',
          },
          {
            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
      }*/
    },
    computed:   {

    },
    methods:    {

      activeIndexSync() {
        const path = this.$route.path;
         console.log(path);
         return
        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;
              }
            }
          }
        }
      },
    }
    ,
    created() {
    },
  };
</script>