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"
                        :router="true"
                        mode="horizontal"
                       >
                    <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';
    import { initThemeColor }      from '@/utils/theme';

    export default {
        name:       'mtaHeader',
        props:      {
            activeNav: {
                type:    String,
                require: true,
                default: '0',
            },
        },
        components: {
        },
        data() {
            return {
                activeIndex:          this.activeNav,
                headerArr:            [
                    {
                        content: '首页',
                        keyPath: '/index',
                    },
                /*    {
                        content:  '考试平台',
                        keyPath:  '/c/kecheng/lists',
                        children: [
                            {
                                content:  'xxxxxx',
                                keyPath:  '/c/kecheng/lists',
                            },
                        ],
                    },*/
                    {
                        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': function (newVal, oldVal) {
                this.activeIndexSync();
            },
        },
        computed:   {
        },
        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;
                            }
                        }
                    }
                }
            },

            checkArray() {
              /*  if (JSON.parse(this.menuFlag) == 1) {

                    for (let i = this.headerArr.length - 1; i >= 0; i--) {
                        if (this.headerArr[i].content == '课程中心') {
                            this.headerArr.splice(i, 1);
                        }
                        if (this.headerArr[i].keyPath === '/c/IndexPeixun') {
                            this.headerArr.splice(i, 1);
                        }
                        if (this.headerArr[i].children && this.headerArr[i].children.length >= 2 && this.headerArr[i].children[1].content == '课程成绩') {
                            this.headerArr[i].children.splice(1, 1);
                        }
                        if (this.headerArr[i].keyPath === '/c/resource/library') {
                            this.headerArr.splice(i, 1);
                        }
                        if (this.headerArr[i].keyPath === '/c/QuestionAndAnswer/lists') {
                            this.headerArr.splice(i, 1);
                        }
                    }
                } else {
                    for (let i = this.headerArr.length - 1; i >= 0; i--) {
                        if (this.headerArr[i].keyPath === '/c/Index') {
                            this.headerArr.splice(i, 1);
                        }
                    }
                }*/
                this.activeIndexSync();
            },

        }
        ,
        created() {
            console.log(this.activeIndex);
            this.checkArray();
            initThemeColor();
        },
    };
</script>