vue+element实现顶部导航栏+左侧导航栏，选择侧边导航栏时，顶部导航栏处于高亮

直接上效果图，顶部导航选择自动化测试，出现左侧导航，左侧导航选择新建任务，这时候自动化测试也处于高亮状态，并且刷新也会仍然选中，并且当我们打开自动化测试时，默认是选中第一个的，这时候我们可以设置默认子路由

image.png

一、 首先配置路由列表

const router = new Router({
  routes: [
    {
      path: '/',
      name: 'login',
      component: login
    },
    {
      path: '/index',
      name: 'index',
      component: index,
      children: [
        {
          path: '/createPackage',
          name: 'createPackage',
          component: createPackage,
          meta: {
            activeMenu: '/createPackage'
          },
        },
        {
          path: '/packageList/:config_id',
          name: 'packageList',
          component: packageList,
          meta: {
            activeMenu: '/packageList/:config_id'
          },
        },
        {
          path: '/tagmanage',
          name: 'tagmanage',
          component: tagmanage,
          meta: {
            activeMenu: '/tagmanage'
          },
        },
        {
          path: '/tools',
          name: 'tools',
          component: tools,
          meta: {
            activeMenu: '/tools'
          },
        },
        {
          path: '/antomated-testing',
          name: 'antomated-testing',
          component: layout,
 redirect:'/antomated-testing/publish-task',
          meta: {
            activeMenu: '/antomated-testing'
          },
          children: [
            {
              path: '/antomated-testing/publish-task',
              name: 'antomated-publish-task',
              component: publishTask,
              meta: {
                activeMenu: '/antomated-testing', // 顶部导航 高亮
                ChildrenActiveMenu: '/antomated-testing/publish-task' // 子导航高亮
              }
            },
            {
              path: '/antomated-testing/task-list',
              name: 'antomated-task-list',
              component: taskList,
              meta: {
                activeMenu: '/antomated-testing', // 顶部导航 高亮
                ChildrenActiveMenu: '/antomated-testing/task-list' // 子导航高亮
              }
            },
          ]
        }
      ]
    },
  ]
})

二、配置顶部导航

 
 
         自动化测试

三、配置左侧导航栏，这边就是主要用computed检测这个数据，左侧导航栏我使用了递归动态生成导航，不懂得可以看看我另一片文章https://www.jianshu.com/p/6b34abeb6db7