vue+element实现顶部导航栏+左侧导航栏，选择侧边导航栏

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

一、 首先配置路由列表

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' // 子导航高亮
              }
            },
          ]
        }
      ]
    },
  ]
})

二、配置顶部导航

 <el-menu
          :default-active="$route.meta.activeMenu"
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b">
 <el-menu-item index="/antomated-testing">
         <router-link to="/antomated-testing" style="display:block;height:100%;">自动化测试</router-link>
</el-menu-item>
</el-menu>

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

 <el-menu
        router
        :default-active="activeMenu"
        class="el-menu-vertical-demo"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b">
        <Menu :menuList="LeftMenus"/>
</el-menu>

<script>
  import Menu from './menu'
  import menuList from "../../../config/menuConfig";

  export default {
    components: {Menu},
    name: "Layout",
    data() {
      return {
        LeftMenus: menuList
      }
    },
    computed: {
      activeMenu() {
        const route = this.$route
        console.log(route)
        const { meta, path } = route
        // if set path, the sidebar will highlight the path you set
        if (meta.ChildrenActiveMenu) { // 注意这里很重要
          return meta.ChildrenActiveMenu
        }
        return path
      }
    },
  }
</script>