修改header

src/components/client/common/header.vue

@@ -7,15 +7,22 @@
                         :default-active="activeIndex"
                         class="el-menu-demo"
                         mode="horizontal"
-                        @select="handleSelect"
+                        :router="true"
                 >
-                    <el-menu-item index="0">首页</el-menu-item>
-                    <el-menu-item index="1">考试平台</el-menu-item>
-                    <el-menu-item index="2">培训平台</el-menu-item>
-                    <el-menu-item index="3">课程开发</el-menu-item>
-                    <el-menu-item index="4">新闻资讯</el-menu-item>
-                    <el-menu-item index="5">帮助中心</el-menu-item>
-                    <el-menu-item index="6">关于我们</el-menu-item>
+                    <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>
@@ -38,47 +45,91 @@
     export default {
         name:       'mtaHeader',
         props:      {
+            activeNav: { // 默认选中的 路径 与组件中的index相互对应
+                type:    String,
+                require: true,
+                default: '0',
+            },
         },
         components: {},
         data() {
             return {
-                activeIndex:'0',
+                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',
+                          ]),
         },
-        computed:   {},
         methods:    {
-            handleSelect(key, keyPath) {
-                switch (Number(key)) {
-                    case 0:
-                        this.$router.push({ name: 'index'});
-                        break;
-                    case 1:
-                        this.$router.push({ name: 'examPlatform'});
-                        break;
-                    case 2:
-                        this.$router.push({ name: 'peixunPlatform'});
-                        break;
-                    case 3:
-                        this.$router.push({ name: 'courseDev'});
-
-                        break;
-                    case 4:
-                        this.$router.push({ name: 'newsInfor'});
-
-                        break;
-                    case 5:
-                        this.$router.push({ name: 'helpCenter'});
-
-                        break;
-                    case 6:
-                        this.$router.push({ name: 'aboutUs'});
-
-                        break;
-
-                    default:
 
+            activeIndexSync() {
+                console.log("进入");
+                const path = this.$route.path;
+                const idx = _.findIndex(this.headerArr, function (o) {
+                    return o.keyPath === path;
+                });
+                console.log(idx);
+                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;
+                            }
+                        }
+                    }
                 }
             },
         }

src/router.js

@@ -19,7 +19,7 @@ const router = new Router({
                               routes: [
                                   {
                                       path:     '/',
-                                      redirect: '/index',
+                                      redirect: '/c/index',
                                   },
                                   {
                                       name:      'Login',
@@ -29,19 +29,19 @@ const router = new Router({
                                       },
                                   },
                                   {
-                                      path:'/c',
+                                      path:'/c/',
                                       component: () => import(/* webpackChunkName: "Cframe" */ './components/client/common/Cframe.vue'),
                                       children:  [
                                           {
                                               name:      'index',
-                                              path:      '/index',
+                                              path:      'index',
                                               component: () => {
                                                   return import(/* webpackChunkName: "index" */ './views/client/Index.vue');
                                               },
                                           },
                                           {
                                               name:      'examPlatform',
-                                              path:      '/examPlatform',
+                                              path:      'examPlatform',
                                               meta:      {
                                                   parentPath: 'croot',
                                                   breadcrumb: {
@@ -54,7 +54,7 @@ const router = new Router({
                                           },
                                           {
                                               name:      'peixunPlatform',
-                                              path:      '/peixunPlatform',
+                                              path:      'peixunPlatform',
                                               meta:      {
                                                   parentPath: 'croot',
                                                   breadcrumb: {
@@ -67,7 +67,7 @@ const router = new Router({
                                           },
                                           {
                                               name:      'courseDev',
-                                              path:      '/courseDev',
+                                              path:      'courseDev',
                                               meta:      {
                                                   parentPath: 'croot',
                                                   breadcrumb: {
@@ -80,7 +80,7 @@ const router = new Router({
                                           },
                                           {
                                               name:      'newsInfor',
-                                              path:      '/newsInfor',
+                                              path:      'newsInfor',
                                               meta:      {
                                                   parentPath: 'croot',
                                                   breadcrumb: {
@@ -93,7 +93,7 @@ const router = new Router({
                                           },
                                           {
                                               name:      'helpCenter',
-                                              path:      '/helpCenter',
+                                              path:      'helpCenter',
                                               meta:      {
                                                   parentPath: 'croot',
                                                   breadcrumb: {
@@ -106,7 +106,7 @@ const router = new Router({
                                           },
                                           {
                                               name:      'aboutUs',
-                                              path:      '/aboutUs',
+                                              path:      'aboutUs',
                                               meta:      {
                                                   parentPath: 'croot',
                                                   breadcrumb: {
@@ -118,7 +118,7 @@ const router = new Router({
                                               },
                                           },
                                           {
-                                              path: '/newsInforDetails',
+                                              path: 'newsInforDetails',
                                               name: 'newsInforDetails',
                                               meta:      {
                                                   parentPath: 'croot',