portal/src/components/client/common/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>
    import MtaUploadAlCloud
                                   from '@/components/management/Layout/UploadAlCloud/UploadAlCloud';
    import axios                   from 'axios';
    import { mapGetters }          from 'vuex';
    import { setAuth, removeAuth } from '@/utils/auth';

    import { setUserIcon, checkUrlIsNotHttpUrl, getTrimData } from '@/utils/common';

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

                ],
            };
        },
        watch:      {
            // 监听
            '$route.path': {
                handler(newVal, oldVal) {
                    this.activeIndexSync();
                },
                immediate: true,
            },
        },
        computed:   {
            ...mapGetters([
                              'getThemeColor',
                          ]),
        },
        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;
                            }
                        }
                    }
                }
            },
        }
        ,
        created() {
        },
    };
</script>